Checking if input[type=search] will show the X to clear input

One of the handy things about

<input type="search">

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

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

Coder_Carl•10/14/22, 3:37 AM

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

SirAlanOP•10/14/22, 6:27 AM

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