How to style placeholder

Changing placeholder using css will differenciate your Web from other one. As you know, placeholder’s text is in light grey color, which is a bit ugly. Therefore, if your template’s main color is green, why not do that your placeholder’s text color to be in light green? I always encourage you to customize each single detail of your Web so that it is not as other hundreds are.

For those who do not know it, the placeholder is the text which appears into text inputs until you focus on it and start to write. I explain it with more details in the following past post about html attribute placeholder. Anyway, you can also find much more information about placeholder in the w3schools page.

How to style placeholder using css

Placeholder is not as general as an html tag, so each browser styles placeholder in its own way. You will need to use the following lines of code:

::-webkit-input-placeholder {
color: rgb( 44, 46, 255 );
font-family: Arial;
font-size: 16px;
font-weight: bold;
}
::-moz-placeholder {
color: rgb( 44, 46, 255 );
font-family: Arial;
font-size: 16px;
font-weight: bold;
}
:-ms-input-placeholder {
color: rgb( 44, 46, 255 );
font-family: Arial;
font-size: 16px;
font-weight: bold;
}

The code above is which you need to know how to style placeholder in Chrome, Firefox and Internet Explorer browsers respectively.

The result of that code is that all placeholder’s text in your document will be in the (44, 46, 255) RGB color, in 16px font size, using the Arial font, and in bold text.

I will apply this configuration to the following input so that you will be able to see what really happen if you use the code above in your Web.

As you can see, I have changed placeholder’s text color in to an Arial (16px) bold blue one. Using css you can do whatever you want. So you already know how to style placeholder, but here you have a bit more.

How to style placeholder: advance mode

Now, you know how to style all placeholder in a Web page, but you can also focus on a specific input by using the class or the id of the inputs which you want to style its placeholder.

For example, Mozilla browser understand this issue like this::

#input-189::-moz-placeholder {
color: rgb( 44, 46, 255 );
font-family: Arial;
font-size: 16px;
font-weight: bold;
}

 

The following two inputs have these two ID’s respectively: #input-189-2 and #input-189-3. So, the first will be displayed in a fuchsia color, and the second one, in a green color.

Here you can see what happen:

 Lastly, you may want to share, comment or rank this post.