CSS:如何将搜索图标与文本“合并”，使其在输入时消失

<div class="search-box">
  <input type="text" placeholder="搜索">
</div>

.search-box {
  position: relative;
  width: 200px;
}

.search-box input[type="text"] {
  padding-left: 20px; /* 为搜索图标留出空间 */
}

.search-box::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url(搜索图标的URL);
  background-size: cover;
  z-index: 1;
}

.search-box input[type="text"]:focus + ::before {
  display: none; /* 在输入时隐藏搜索图标 */
}