v135 · css / forms

Placeholder Styler

Live configure the nested pseudo-element ::placeholder::selection — the style applied when a user selects placeholder text. Try selecting the placeholder in the inputs below to see the nested pseudo-element take effect. Also explore ::before::marker and ::placeholder::first-line.

checking nested pseudo-element support…

Chrome 135 allows styling pseudo-elements nested inside other pseudo-elements. The flagship use case: ::placeholder::selection controls how selected placeholder text looks. Previously, this combination was either unsupported or required browser-specific hacks. Other supported combinations include ::before::marker and ::slotted::placeholder.

Configure ::placeholder::selection

Placeholder color

Selection background

Selection text color

Placeholder font style

Demo — select the placeholder text in these inputs

Try selecting the placeholder

Name (select the grey placeholder)

Message (textarea)

Other nested pseudo-element combinations

::before::marker

.list-item::before::marker { color: purple; }

Item with ::before::marker styling
Another list item

::placeholder::first-line

textarea::placeholder::first-line { font-weight: bold; }

Generated CSS