我的 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;
}
}
目標是在搜索占位符詞旁邊有一個搜索圖示，但正如您在上圖中看到的那樣，它顯示的是 2 個放大鏡而不是 1 個。這只發生在移動設備上，而不是桌面設備上。
uj5u.com熱心網友回復：
瀏覽器可能會插入額外的搜索圖示，因為您<input>的type="search". 如果你想擺脫它，那么你可以切換到 plain type="text"。
或者，如果您想要特殊的瀏覽器處理type="search"，那么您可以隱藏額外的圖示。 看到這個答案。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/481558.html