:placeholder-shown CSS pseudo-class

Input elements can sometimes show placeholder text as a hint to the user on what to type in. See, for example, the placeholder attribute in HTML5. The :placeholder-shown pseudo-class matches an input element that is showing such placeholder text.

W3C Working Draft: https://www.w3.org/TR/selectors4/#placeholder

Usage: 97.4% + 0.63% = 98%

Support summary

Notes

For support of styling the actual placeholder text itself, see CSS ::placeholder

  1. Partial support in Firefox refers to using the non-standard `:-moz-placeholder` name rather than `:placeholder-shown`.
  2. Partial support in IE refers to using the non-standard `:-ms-input-placeholder` name rather than `:placeholder-shown`.

Links

Full support table

IE

5.567891011
nnnnna,xa,x

Edge

121314151617187980818384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
nnnnnnnyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Firefox

233.53.6456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
nnnna,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xa,xyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Chrome

4567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Safari

3.13.2455.166.177.1899.11010.11111.11212.11313.11414.11515.115.2-15.315.415.515.616.016.116.216.316.416.516.617.017.117.217.317.417.5TP
nnnnnnnnnnyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Opera

99.5-9.610.0-10.110.510.61111.111.511.61212.11516171819202122232425262728293031323334353637383940414243444546474849505152535455565758606263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Safari on iOS

3.24.0-4.14.2-4.35.0-5.16.0-6.17.0-7.188.1-8.49.0-9.29.310.0-10.210.311.0-11.211.3-11.412.0-12.112.2-12.513.0-13.113.213.313.4-13.714.0-14.414.5-14.815.0-15.115.2-15.315.415.515.6-15.816.016.116.216.316.416.516.6-16.717.017.117.217.317.417.5
nnnnnnnnyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Opera Mini

all
n

Android Browser

2.12.22.3344.14.2-4.34.44.4.3-4.4.4124
nnnnnnnnny

Blackberry Browser

710
nn

Opera Mobile

101111.111.51212.180
nnnnnny

Chrome for Android

124
y

Firefox for Android

125
y

IE Mobile

1011
nn

UC Browser for Android

15.5
y

Samsung Internet

45.0-5.46.2-6.47.2-7.48.29.210.111.1-11.212.013.014.015.016.017.018.019.02021222324
nyyyyyyyyyyyyyyyyyyyy

QQ Browser

14.9
y

Baidu Browser

13.52
y

KaiOS Browser

2.53.0-3.1
a,xy

Back to list

Data copyright caniuse.com