Remove the Search Input Clear(x) Icon
Publikováno: 21.9.2020
I really appreciate the amount of different <input> elements we’ve received over the past decade. These elements don’t just bring a new semantic advantage, but also provide UI helpers, which in many cases are useful. In a recent case, I found a UI element not useful: the x (clear) icon in <input type="search" /> elements. […]
The post Remove the Search Input Clear(x) Icon appeared first on David Walsh Blog.
I really appreciate the amount of different <input> elements we’ve received over the past decade. These elements don’t just bring a new semantic advantage, but also provide UI helpers, which in many cases are useful. In a recent case, I found a UI element not useful: the x (clear) icon in <input type="search" /> elements.
In most cases that input is nice, but if you’re looking to really customize your search experience, you may want to get it out of the way:
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
With the snippet above, the cancelation icon disappears, as does the special highlight decoration!
The post Remove the Search Input Clear(x) Icon appeared first on David Walsh Blog.