::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	79	57	51	44	10.1
Tablets / Mobile
57	57	51	43	10.3	7.0

Last updated by CSSPortal on: 25th November 2019