::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

HTML

<div class="form">

  <input type="text" placeholder="What is your first name?"><br><br>

  <input type="text" placeholder="What is your surname?">

</div>

CSS

.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; 

}

Result

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