This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The ::placeholder
CSS pseudo-element represents the placeholder text of a form element.
::placeholder { color: blue; font-size: 1.5em; }
Only the subset of CSS properties that apply to the ::first-line
pseudo-element can be used in a rule using ::placeholder
in its selector.
Note: In Firefox, the appearance of placeholder text is a translucent gray color by default.
Syntax
::placeholder
Example
HTML
<input placeholder="Type something here!">
CSS
input::placeholder { color: red; font-size: 1.2em; font-style: italic; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Pseudo-Elements Level 4 The definition of '::placeholder' in that specification. |
Working Draft | Initial definition. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Edge | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 57 | 51.0 (51.0)[1] | No support | No support | 44 | 10.1 |
Partial support with prefix | Supported | Supported | Supported | 10 -ms- | Supported | 5 -webkit- |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 57 | 57 | 52.0 (52.0) | No support | 10.3 | |
Partial support with prefix | 2.1 -webkit- | Supported | Supported | 10 -ms- | 37 -webkit- | 4.3 -webkit- |
[1] Before Gecko 51.0 (Firefox 51.0 / Thunderbird 51.0 / SeaMonkey 2.48) Gecko implemented this as the prefixed ::-moz-placeholder
pseudo-element.
See also
- The
:placeholder-shown
pseudo-class styles an element that has an active placeholder. - Related HTML elements:
<input>
,<textarea>
- The non-standard equivalents to this pseudo-element:
::-webkit-input-placeholder
,::-moz-placeholder
,:-ms-input-placeholder
- HTML forms