Monday, November 20, 2017

Change an HTML5 input's placeholder color with CSS

There are three different implementations: pseudo-elements, pseudo-classes, and nothing.
  • WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element: ::-webkit-input-placeholder
  • Mozilla Firefox 4 to 18 is using a pseudo-class: :-moz-placeholder (one colon). 
  • Mozilla Firefox 19+ is using a pseudo-element: ::-moz-placeholder, but the old selector will still work for a while. 
  • Internet Explorer 10 and 11 are using a pseudo-class: :-ms-input-placeholder
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.
The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the pseudo-element.

So we need separate rules for each browser. Otherwise the whole group would be ignored by all browsers.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}
<input placeholder="php999 is great!">

2 comments:

  1. It is very useful material Thanks for sharing..
    very interesting and helpful
    Read More at php training in Chandigarh

    ReplyDelete
  2. CIIT Noida provides Best MCA Courses in Noida based on the current IT industry standards that help students to get high paying jobs in Top MNCs. CIIT provides Best MCA Training in Noida, Greater Noida, and Ghaziabad. CIIT is one of the trusted MCA training institutes in Noida providing practical knowledge and 100% job assistance with basic as well as advanced level MCA subjects. CIITN is the best MCA college in Noida, greater noida, ghaziabad, delhi, gurgaon regoin.

    At CIIT MCA classes in Noida is conducted by subject experts corporate professionals with 9+ years of experience in managing real-time and live projects. Sofracle Nano Specialized MCA classes Noida is the perfect blend of academic learning and practical sessions to provide maximum exposure to students that transform an average student into a corporate professional whom companies prefer to hire.

    Best MCA College in Noida

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...