The clear functionality in search fields is currently tailored to chrome browsers. One workaround could be to eliminate the default clear button in chrome and implement a custom clear button instead. However, this approach may lead to compatibility issues if other browsers decide to incorporate similar browser-specific features in the future.
While this may not be the ideal solution you were hoping for, I have prepared an example demonstrating how to remove the default clear button in chrome and replace it with a customized clear button:
// Retrieving clear buttons
const clear = document.querySelectorAll('.clear');
// Iterating through clear buttons to accommodate multiple search fields on a page
for (let i = 0; i < clear.length; i++) {
// Adding a click event listener to each clear button
clear[i].addEventListener("click", function() {
// Clearing the associated search input field
clear[i].previousElementSibling.value='';
});
}
/* Eliminate default 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;
}
/* Styling for the basic clear button */
.clear {
position:absolute;
right:4px;
top:2px;
cursor:pointer;
display:inline-block;
}
/* Styling for the basic search wrapper and input */
.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>