Кнопка отмены ввода типа «поиск» не отображается в Firefox, IE и Edge - PullRequest
Новая
       30

Кнопка отмены ввода типа «поиск» не отображается в Firefox, IE и Edge

0 голосов
/ 23 октября 2019 

.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">

Я добавил, и он отлично работает в Chrome, но кнопка очистки не работает в Firefox, Internet Explorer и MS Edge:

Browser output

1 Ответ

0 голосов
/ 23 октября 2019

Кнопка очистки в полях поиска относится только к Chrome. Единственное решение, которое я могу придумать, это удалить кнопку очистки из хрома и добавить пользовательскую кнопку очистки. Однако это может вызвать проблемы, если какие-либо другие браузеры решат добавить эту функцию в будущем.

Возможно, это не тот ответ, который вы искали, и вы, вероятно, уже знаете, как это сделать, но я поставилвместе пример того, как удалить кнопку очистки из Chrome и создать пользовательскую кнопку очистки. 

// 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>
...