re: Possibly the Most Useful CSS Trick VIEW POST


CanIUse shows support for :placeholder-shown as pretty solid everywhere except IE (partial) and Edge (no support). If you don't have to support either of those browsers, then go for it! Otherwise, this is still a fantastic pure-CSS technique but should probably be paired with a JS fallback if the functionality is critical.


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)


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.

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

code of conduct - report abuse