.hs-search-field__input {
    color: #111d33;
    border-bottom: 3px solid #111d33;
    appearance: searchfield;
    -moz-appearance: searchfield;
    -webkit-appearance: searchfield;
    -ms-appearance: searchfield;
    color: #fff;
    border-radius: 0px !important;
}
<input type="search" class="hs-search-field__input" name="term" autocomplete="off" aria-label="Search" placeholder="Search">

Saya menambahkan dan berfungsi dengan baik di chrome tetapi tombol hapus tidak berfungsi di Firefox, Internet Explorer, dan MS Edge:

Browser output

2
Anzer Mansuri 23 Oktober 2019, 16:22

1 menjawab

Jawaban Terbaik

Tombol hapus pada bidang pencarian khusus untuk chrome. Satu-satunya solusi yang dapat saya pikirkan adalah menghapus tombol hapus dari chrome dan menambahkan tombol hapus khusus. Namun ini dapat menyebabkan masalah jika ada browser lain yang memutuskan untuk menambahkan fungsionalitas khusus browser ini di masa mendatang.

Ini mungkin bukan jawaban yang Anda cari dan Anda mungkin sudah tahu cara melakukannya, tetapi saya telah mengumpulkan contoh cara menghapus tombol hapus dari chrome dan membuat tombol kustom yang jelas.

// Get clear buttons
const clear = document.querySelectorAll('.clear');

// Loop through clear buttons. 
// This is so you can have multiple search fields on a page.
for (let i = 0; i < clear.length; i++) {
   // Add a click event listener to each clear button
   clear[i].addEventListener("click", function() {
     // Clear sibling search input
     clear[i].previousElementSibling.value='';
   });
}
/* Remove chrome clear button */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance:none;
}

/* Basic clear button styling */
.clear {
 position:absolute;
 right:4px;
 top:2px;
 cursor:pointer;
 display:inline-block;
}

/* Basic search wrapper and input styling */
.search-wrap {
 display:inline-block;
 position:relative;
}
.search-wrap input[type="search"] {
 padding-right:20px;
}
<div class="search-wrap">
  <input type="search">
  <div class="clear">X</div>
</div>
1
WizardCoder 23 Oktober 2019, 15:31