::placeholder CSS Pseudo Element


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.


element::placeholder { … }


<div class="form">
<input type="text" placeholder="What is your first name?"><br><br>
<input type="text" placeholder="What is your surname?">
.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;


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

Explorer Edge Chrome Firefox Opera Safari
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung