DEV Community

Discussion on: Possibly the Most Useful CSS Trick

lucasengel profile image
Lucas Engel • Edited on

I still wouldn't use it for a button (as exemplified) as you'd only be able to see it when the input is focused. For whatever reason, the user might tab away and then decide to run the search.
Accessbility-wise, it's not a good practice either. If you change the focus from the input to the button using tab, this technique would hide the button given the input is not focused anymore.
(edit: fix typo)

seanbuchholz profile image
Sean Buchholz

Those are both very good points I hadn't considered. Maybe visually show/hide the button on input focus, and then persist that state if the user has entered some input into the field?

Maybe this isn't the best example of the :not(:placeholder-shown) selector in use, but now it has me thinking about other ways this selector could be used to enhance rather than diminish accessibility.

Thread Thread
capsule profile image
Thibaut Allender

:placeholder-shown doesn't rely on focus so it would still work while navigating with the keyboard, but screen readers would still be lost if you wanted to dim the search button. Also, you'd have to use either the disabled attribute, or better, aria-disabled (it's considered bad practice to disable a button as you might not know what disabled it, so you should still be able click it and get a proper error message), but both would require some JS to dynamically change their value. So yeah, it can be a useful pseudo-class but it turns out to be tricky, rather than a "trick" ;-)