Placeholder shown CSS selector

7/7/2020
#til, #css

Today I learned about :placeholder-shown selector in CSS. What is doing? It is selecting those inputs - if you are gonna use it as input:placeholder-shown which currently has a placeholder. It works on all browsers except IE11. When it can be useful?

For styling input with float label + placeholder. See the example below (works on chrome/safari) - see line 55 inside this codepen:

See the Pen Float Labels with :placeholder-shown by CSS-Tricks (@css-tricks) on CodePen.