Input type "search" cancel button not showing in Firefox, IE and Edge

user_8569031 0
Viewed 1787

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

I added and it is working fine in chrome but the clear button is not working in Firefox, Internet Explorer and MS Edge:

Browser output

css-selectors forms css html
1 Answers

The clear button on search fields is specific to chrome. The only solution I can think of is to remove the clear button from chrome and add a custom clear button. However this may cause issues if any other browsers decide to add this browser specific functionality in the future.

This is probably not the answer you were looking for and you probably already know how to do this, but I have put together an example how to remove the clear button from chrome and create a custom clear button.

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

user_80856680
Related