CSS Change an Html5 Inputs Placeholder Color

• CSS Change an Html5 Inputs Placeholder Color
• Placeholder Attribute Example

CSS Change an Html5 Inputs Placeholder Color

We use placeholder attribute to show text that appears in the form control when it has no value set.

The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.

Most modern browsers support the simple pseudo-element ::placeholder Ref

The placeholder attribute should not be used as an alternative to a label. For a longer hint or other advisory text, the title attribute is more appropriate.

Internet Explorer 9 and lower does not support the placeholder attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.

Placeholder Attribute Example

<input placeholder="Please enter your email.">
<textarea placeholder="You can start typing"></textarea>

  <style>    
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
       color:    #909;
       opacity:  1;
    }    
    ::-ms-input-placeholder { /* Microsoft Edge */
       color:    #909;
    }
    ::placeholder { /* Most modern browsers support this now. */
       color:    red;
    }
  </style>

The Input (Form Input) element

HTML Placeholder attribute