搜索图标在手机上重复两次

Question

我的 svg 图标仅在 iphone (xs)、chrome.

上重复两次

这是我的代码：

SVG

 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.7888 9.58435C6.8011 11.1763 3.89152 11.051 2.04893 9.20845C0.0719048 7.23142 0.0719048 4.02602 2.04893 2.049C4.02596 0.0719657 7.23136 0.0719661 9.20839 2.049C11.051 3.89158 11.1763 6.80115 9.58429 8.78885L13.451 12.6556C13.6707 12.8752 13.6707 13.2314 13.451 13.4511C13.2313 13.6707 12.8752 13.6707 12.6555 13.4511L8.7888 9.58435ZM2.84443 8.41296C1.30674 6.87527 1.30674 4.38218 2.84443 2.84449C4.38212 1.3068 6.87521 1.3068 8.4129 2.84449C9.94946 4.38105 9.95058 6.87161 8.41628 8.40957C8.41514 8.41068 8.41401 8.41181 8.41288 8.41294C8.41175 8.41407 8.41063 8.4152 8.40951 8.41633C6.87155 9.95064 4.38099 9.94952 2.84443 8.41296Z" fill="#BDBFC6"/>
</svg>

HTML

 <div class="search-container">
      <input type="search" placeholder="Search"/>
  </div>

CSS

.search-container{
  display: flex;
  justify-content: left;
  align-items: center;
  left: 0;
  display: flex;
  padding: 2px;
  border-radius: 8px;
  margin: 20px 20px 0 20px;
  width: 80%;
  margin: 0 auto;
  margin-bottom: 20px;
    input {
      width: 100%;
      padding: 9px 4px 9px 4px;
      border-radius: 8px;
    }
    input[type="search"] {
      border: none;
      margin: 0;
      padding: 20px 20px 20px 40px;
      font-size: 16px;
      background: url("/images/magnifying_glass.svg"), #F7F8F9;
      background-repeat: no-repeat !important;
      background-position: 15px center;
      background-size: 13px contain;
    }
    input[type="search"]::placeholder {
      color: #BDBFC6;
    }
    input[type="search"]:focus {
      outline: none;
    }
}

objective 是在搜索占位符旁边有一个搜索图标，但正如您在上图中看到的那样，它显示了 2 个放大镜而不是 1 个。这只发生在移动设备上，而不是桌面。

Answer 1

浏览器可能插入了额外的搜索图标，因为您的 <input> 是 type="search"。如果你想摆脱它，那么你可以切换到普通 type="text".

或者，如果您希望在 type="search" 周围进行特殊浏览器处理，那么您可以隐藏额外的图标。 See this answer.

搜索图标在手机上重复两次

Search icon repeating twice on mobile

html

css

svg