.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:
2
23 Окт 2019 в 16:22
1 ответ
Лучший ответ
Кнопка очистки в полях поиска специфична для 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>
1
23 Окт 2019 в 15:31