::placeholder CSS pseudo-element
::placeholder CSS pseudo-element
The ::placeholder pseudo-element represents placeholder text in an input field: text that represents the input and provides a hint to the user on how to fill out the form. For example, a date-input field might have the placeholder text YYYY/MM/DD
to clarify that numeric dates are to be entered in year-month-day order.
Spec | http://dev.w3.org/csswg/css-pseudo-4/#placeholder-pseudo |
---|---|
Status | W3C Working Draft |
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
57 | 62 | ||||
56 | 61 | TP | 48 | ||
16 (*) | 55 | 60 | 11 | 47 | |
11 (*) | 15 (*) | 54 | 59 | 10.1 | 46 |
10 (*) | 14 (*) | 53 | 58 | 10 (*) | 45 |
9 | 13 (*) | 52 | 57 | 9.1 (*) | 44 |
8 | 12 (*) | 51 | 56 (*) | 9 (*) | 43 (*) |
Show all | |||||
7 | 50 (*) | 55 (*) | 8 (*) | 42 (*) | |
6 | 49 (*) | 54 (*) | 7.1 (*) | 41 (*) | |
5.5 | 48 (*) | 53 (*) | 7 (*) | 40 (*) | |
47 (*) | 52 (*) | 6.1 (*) | 39 (*) | ||
46 (*) | 51 (*) | 6 (*) | 38 (*) | ||
45 (*) | 50 (*) | 5.1 (*) | 37 (*) | ||
44 (*) | 49 (*) | 5 (*) | 36 (*) | ||
43 (*) | 48 (*) | 4 | 35 (*) | ||
42 (*) | 47 (*) | 3.2 | 34 (*) | ||
41 (*) | 46 (*) | 3.1 | 33 (*) | ||
40 (*) | 45 (*) | 32 (*) | |||
39 (*) | 44 (*) | 31 (*) | |||
38 (*) | 43 (*) | 30 (*) | |||
37 (*) | 42 (*) | 29 (*) | |||
36 (*) | 41 (*) | 28 (*) | |||
35 (*) | 40 (*) | 27 (*) | |||
34 (*) | 39 (*) | 26 (*) | |||
33 (*) | 38 (*) | 25 (*) | |||
32 (*) | 37 (*) | 24 (*) | |||
31 (*) | 36 (*) | 23 (*) | |||
30 (*) | 35 (*) | 22 (*) | |||
29 (*) | 34 (*) | 21 (*) | |||
28 (*) | 33 (*) | 20 (*) | |||
27 (*) | 32 (*) | 19 (*) | |||
26 (*) | 31 (*) | 18 (*) | |||
25 (*) | 30 (*) | 17 (*) | |||
24 (*) | 29 (*) | 16 (*) | |||
23 (*) | 28 (*) | 15 (*) | |||
22 (*) | 27 (*) | 12.1 | |||
21 (*) | 26 (*) | 12 | |||
20 (*) | 25 (*) | 11.6 | |||
19 (*) | 24 (*) | 11.5 | |||
18 (1,*) | 23 (*) | 11.1 | |||
17 (1,*) | 22 (*) | 11 | |||
16 (1,*) | 21 (*) | 10.6 | |||
15 (1,*) | 20 (*) | 10.5 | |||
14 (1,*) | 19 (*) | 10.0-10.1 | |||
13 (1,*) | 18 (*) | 9.5-9.6 | |||
12 (1,*) | 17 (*) | 9 | |||
11 (1,*) | 16 (*) | ||||
10 (1,*) | 15 (*) | ||||
9 (1,*) | 14 (*) | ||||
8 (1,*) | 13 (*) | ||||
7 (1,*) | 12 (*) | ||||
6 (1,*) | 11 (*) | ||||
5 (1,*) | 10 (*) | ||||
4 (1,*) | 9 (*) | ||||
3.6 | 8 (*) | ||||
3.5 | 7 (*) | ||||
3 | 6 (*) | ||||
2 | 5 (*) | ||||
4 (*) |
iOS Safari | Opera Mini | Android Browser | Blackberry Browser | Opera Mobile | Android Chrome | Android Firefox | IE Mobile | Android UC Browser | Samsung Internet | QQ Browser | Baidu Browser |
---|---|---|---|---|---|---|---|---|---|---|---|
11 | |||||||||||
10.3 | all | 56 | 10 (*) | 37 (*) | 59 | 54 | 11 (*) | 11.4 (*) | 5 (*) | 1.2 (*) | 7.12 |
10.0-10.2 (*) | 4.4.3-4.4.4 (*) | 7 (*) | 12.1 | 10 (*) | 4 (*) | ||||||
9.3 (*) | 4.4 (*) | 12 | |||||||||
9.0-9.2 (*) | 4.2-4.3 (*) | 11.5 | |||||||||
Show all | |||||||||||
8.1-8.4 (*) | 4.1 (*) | 11.1 | |||||||||
8 (*) | 4 (*) | 11 | |||||||||
7.0-7.1 (*) | 3 (*) | 10 | |||||||||
6.0-6.1 (*) | 2.3 (*) | ||||||||||
5.0-5.1 (*) | 2.2 (*) | ||||||||||
4.2-4.3 (*) | 2.1 (*) | ||||||||||
4.0-4.1 | |||||||||||
3.2 |
Notes
Partial support refers to using alternate names:
::-webkit-input-placeholder
for Chrome/Safari/Opera (Chrome issue #623345)
:-ms-input-placeholder
for IE.
::-ms-input-placeholder
for Edge (also supports webkit prefix)
Firefox 18 and below supported the
:-moz-placeholder
pseudo-class rather than the::-moz-placeholder
pseudo-element.
- * Partial support with prefix.
Resources
- MSDN article
- CSS-Tricks article with all prefixes
- CSSWG discussion
- Mozilla Developer Network (MDN) documentation - CSS ::-moz-placeholder
- Mozilla Bug 1069012 - unprefix :placeholder-shown pseudo-class and ::placeholder pseudo-element
Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
http://caniuse.com/#feat=css-placeholder