Checking if input[type=search] will show the X to clear input
One of the handy things about
<input type="search"> is when the browser shows the X that will clear the input. But it varies between browsers. Chrome and Safari show it but Firefox doesn't. Haven't checked on mobiles but it would most likely depend on client.
I have a <input type="reset"> field and don't want to have both showing at once. Is there a way of only showing the reset if the browser won't show the clear search field natively? Any other considerations for me?2 Replies
https://davidwalsh.name/remove-clear-search this basically covers hiding the pseudo element
and if you really wanted to have the native X sometimes, you will probably just have to do a @supports lower down that either hides / unhides the respective clears.
Lea Verou has a great talk about future CSS stuff using container queries and custom properties that you could use to toggle something easily with. Unsure if it is all supported yet - https://youtu.be/ZuZizqDF4q8?t=1281
I use Lea's method for custom properties fairly often (very useful and wouldn't have thought of it before seeing that webinar :-)). I couldn't seem to find the pseudo property ::-webkit-search-cancel-button - thanks for that. I think in this case, better for me to hide it. Normally, leaving the cancel button in the browser is good from my point of view but I don't want both on the input. Thanks again