CODEWITHSUNDEEP
htmlcssformscss-selectors
Anzer Mansuri
Anzer Mansuri

Reputation: 33

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

.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

Upvotes: 3

Views: 2683

Answers (1)

WizardCoder
WizardCoder

Reputation: 3461

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>

Upvotes: 2

Related Questions