DEV Community

Discussion on: Possibly the Most Useful CSS Trick

Collapse
 
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" ;-)