Krzysztof Żuraw

Placeholder shown CSS selector

  • #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.