Changing the Input’s HTML5 Placeholder color with CSS can be challenging. The reason behind the complexity is how different browsers react with HTML5. The good news is that there is a working solution that you can use to make it happen. So, how to make it work?

First, you need to understand that two different implementations are in use. They are pseudo-classes and pseudo-elements.

Now, that you are aware of the types of implementation, let’s go through the code.

The above code will enable you to color the input’s HTML5 placeholder. For each browser, there is a different implementation. For example,

1. Microsoft Edge, Blink, WebKit utilize the ::-webkit-input-placeholder pseudo-element.
2. :-moz-placeholder is a pseudo-class and is used by Mozilla Firefox version 4 to 18.
3. ::-moz-placeholder is a pseudo-element and works for Mozilla Firefox 19+.
4. And lastly :-ms-input-placeholder is a pseudo-class for Internet Explorer 10 and 11.

All the above pseudo-classes and pseudo-elements are necessary to handle the required result.

Also, you need to make sure that the selectors are kept separately. The reason is simple: If any one of the selectors is invalid, it will make the group invalid as well, making your code unusable.

There are some special cases that you need to make sure don’t happen.

1. Reduced opacity is seen in Firefox’s placeholder. To make sure it works, you need to put opacity:1 in your code.
2. The placeholders should be tested for both size and font.

To understand the whole concept, you can watch it live here. The code is put together by Sk8erPeter.

Do you have anything to add to the tutorial? If yes, don’t forget to use the comments section below.

You can also check on our website for videos about HTML/CSS. Below are some examples:

• improve web design: css, html (part 2) – HTML5

• Coding while in class (part 1) – HTML5

You can also follow some of our broadcasters who program in JavaScript as below:

 continuitydrift

 Foxxel

Another cool way to find out interesting things about HTML/CSS is to access our project page!