::placeholder CSS Pseudo Element
Description
The ::placeholder
pseudo-element represents placeholder text in an input field. The placeholder text will generally give you a hint on what needs to be entered into the input field. You can use css properties to change the appearance of the text, for example, set the font and color.
Syntax
element::placeholder { … }
Example
<div class="form">
<input type="text" placeholder="What is your first name?"><br><br>
<input type="text" placeholder="What is your surname?">
</div>
.form {
border: 1px solid blue;
background: #ccc;
margin: 20px;
padding: 30px;
width: 250px;
}
input::-moz-placeholder {
color: green;
}
input::-webkit-input-placeholder {
color: green;
}
input:-ms-input-placeholder {
color: green;
}
input::-ms-input-placeholder {
color: green;
}
input::placeholder {
color: green;
}
Notes
Internet Explorer uses the pseudo-class :-ms-input-placeholder.
Microsoft Edge uses the pseudo-element ::-ms-input-placeholder .
Chrome, to version 57, Opera to version 44, Safari to version 10.1 and Android use the pseudo-element ::-webkit-input-placeholder.
Firefox from version 4 through 19 uses the pseudo -class :-moz-placeholder.
Firefox prior to version 51 uses the pseudo-element ::-moz-placeholder
Browser Support
Desktop | |||||
X | 12 | 57 | 51 | 44 | 10.1 |
Tablets / Mobile | |||||
![]() |
|||||
57 | 57 | 51 | 43 | 10.3 | 7.0 |
Last updated by CSSPortal on: 25th November 2019
CSS Pseudo Elements
CSS Pseudo Classes
- :active
- :checked
- :default
- :disabled
- :empty
- :enabled
- :first-child
- :first-of-type
- :focus
- :fullscreen
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang
- :last-child
- :last-of-type
- :link
- :not
- :nth-child
- :nth-last-child
- :nth-last-of-type
- :nth-of-type
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :read-only
- :read-write
- :required
- :root
- :target
- :valid
- :visited