How to set the color and font style of placeholder text

html css placeholder
overflowstack9 picture overflowstack9 · Jul 20, 2016 · Viewed 33.4k times · Source

I want to set the color to the placeholder, change the font style to bold, and increase the size.

How can I achieve this? Should I give style to the placeholder, or is there any other way can I achieve this? I want to set the color and change font style to work in all browsers for select size in the below result.

Answer

Angel Politis picture Angel Politis · Jul 20, 2016

You can use the following code for cross-browser support:

For Google Chrome:

.element::-webkit-input-placeholder {
    color: blue;
    font-weight: bold;
}

For Mozilla Firefox:

.element::-moz-placeholder {
    color: blue;
    font-weight: bold;
}

For Internet Explorer:

.element:-ms-input-placeholder {
    color: blue;
    font-weight: bold;
}

For Opera:

.element:-o-input-placeholder {
    color: blue;
    font-weight: bold;
}

Related questions

Change an HTML5 input's placeholder color with CSS

Chrome supports the placeholder attribute on input[type=text] elements (others probably do too). But the following CSS doesn't do anything to the placeholder's value: Value will still remain grey instead of red. Is there a way to change the …

Read More
How do I make a placeholder for a 'select' box?

I'm using placeholders for text inputs which is working out just fine. But I'd like to use a placeholder for my selectboxes as well. Of course I can just use this code: <select> <option value="">Select …

Read More
How do I auto-hide placeholder text upon focus using css or jquery?

This is done automatically for every browser except Chrome. I'm guessing I have to specifically target Chrome. Any solutions? If not with CSS, then with jQuery? Kind regards.

Read More