Clear button in input field to appear only if there is text

[TonyR]

Hi

I have managed to get a clear button working in an input field but I do not know how to get to appear only when there is text in the field.

You can see what I have at the moment here: https://codepen.io/TonyRuttle/pen/EJNyVN

I am not sure if this is a CSS issue but a JS topic but I have added this topic in the CSS category.

Tony

[requinix]

If you keep the input as required then you can use the :valid/invalid CSS selectors.

input:invalid + #clear { visibility: hidden; }

Separately, you shouldn't make the clear button use an ID because then you can't have more than one on a page. At least 90% of the time, if you're thinking of using an ID you should probably use a class instead.

[TonyR]

Thank you requinix. This is working perfectly.

Duly noted regarding the id/class. I have edited the above link to add your changes.