Education Ecosystem Blog

E-Learning

Learn HTML-CSS: How To Change an Input’s HTML5 Placeholder Color with CSS?

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.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #0000ff; }

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #0000ff; opacity: 1; }

::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #0000ff; opacity: 1; }

:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #0000ff; }

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

Microsoft Edge, Blink, WebKit utilize the ::-webkit-input-placeholder pseudo-element.
:-moz-placeholder is a pseudo-class and is used by Mozilla Firefox version 4 to 18.
::-moz-placeholder is a pseudo-element and works for Mozilla Firefox 19+.
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.

Reduced opacity is seen in Firefox’s placeholder. To make sure it works, you need to put opacity:1 in your code.
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!

Dr. Michael J. Garbade

I, Dr. Michael J. Garbade is the co-founder of the Education Ecosystem (aka LiveEdu), ex-Amazon, GE, Rebate Networks, Y-combinator. Python, Django, and DevOps Engineer. Serial Entrepreneur. Experienced in raising venture funding. I speak English and German as mother tongues. I have a Masters in Business Administration and Physics, and a Ph.D. in Venture Capital Financing. Currently, I am the Project Lead on the community project -Nationalcoronalvirus Hotline I write subject matter expert technical and business articles in leading blogs like Opensource.com, Dzone.com, Cybrary, Businessinsider, Entrepreneur.com, TechinAsia, Coindesk, and Cointelegraph. I am a frequent speaker and panelist at tech and blockchain conferences around the globe. I serve as a start-up mentor at Axel Springer Accelerator, NY Edtech Accelerator, Seedstars, and Learnlaunch Accelerator. I love hackathons and often serve as a technical judge on hackathon panels.

Next LiveEdu视频删除制度 »

Previous « Learn HTML-CSS "How To Align a div to The Middle horizontally on a Page?

View Comments

Kevin Rodger says:

December 28, 2016 at 10:45 am

Working with HTML5 placeholders is not easy at all. There are different implementation for different browsers which makes life of web developers harder as usual. Great guide, btw!