How to change color of a placeholder in CSS

This is a very popular case in web development. Sometimes, when making a HTML form, you need to change color of a placeholder text to the desired custom value.

It can be done very easily, but still, you have to know some aspects to make it look good in different browsers, especially in old.

We will make a simple HTML form with basic fields, like full name, phone number, email address and the submit button.

<form>
    <div class="form-row">
        <input type="text" placeholder="Enter your name">
    </div>
    <div class="form-row">
        <input type="text" placeholder="Phone number">
    </div>
    <div class="form-row">
        <input type="text" placeholder="Email address">
    </div>
    <div class="form-row">
        <input type="submit" value="Submit">
    </div>
</form>

You can use the following code as a starting point. Just add it to our example above or to your own custom project and change color to the required value.

:-moz-placeholder { /* Mozilla Firefox 4 - 18 */
    color: #70d070;
    opacity: 1;
}

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

::-webkit-input-placeholder { /* WebKit, Microsoft Edge */
    color: #70d070;
}

::-moz-placeholder { /* Mozilla Firefox 19 or later */
    color: #70d070;
    opacity: 1;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #70d070;
}

::placeholder { /* This is CSS rule for all modern browsers */
    color: #70d070;
}

As you may have noticed in this code block, we have separate rules for each type of pseudo-element. That's because browsers may ignore the whole group if they detect some unknown selector inside. Each browser will process the rule which applies to them only.

Now, you can see how the form may look with our custom code added to the styles:

In preview, the placeholders are green in edit boxes. But as you type, the color of text becomes gray.

If you want to change placeholder for the specific CSS class only, then the code would look like:

.input-field:-moz-placeholder { /* Mozilla Firefox 4 - 18 */
    color: #70d070;
    opacity: 1;
}

.input-field:-ms-input-placeholder { /* Internet Explorer 10 - 11 */
    color: #70d070;
}

.input-field::-webkit-input-placeholder { /* WebKit, Microsoft Edge */
    color: #70d070;
}

.input-field::-moz-placeholder { /* Mozilla Firefox 19 or later */
    color: #70d070;
    opacity: 1;
}

.input-field::-ms-input-placeholder { /* Microsoft Edge */
    color: #70d070;
}

.input-field::placeholder { /* This is CSS rule for all modern browsers */
    color: #70d070;
}

It's important to note that you don't have to use all specified pseudo-elements from the examples above. That code is needed only if you want to support old browsers.

But to have more elegant and cleaner code, you may write it like this:

.input-field::-webkit-input-placeholder { /* WebKit, Microsoft Edge */
    color: #70d070;
}

.input-field::-moz-placeholder { /* Mozilla Firefox 19 or later */
    color: #70d070;
    opacity: 1;
}

.input-field::-ms-input-placeholder { /* Microsoft Edge */
    color: #70d070;
}

.input-field::placeholder { /* This is CSS rule for all modern browsers */
    color: #70d070;
}

CSS is a very powerful tool, and additionally you can change font size, weight, style or other attributes, see it in the example below:

.input-field::placeholder { /* This is CSS rule for all modern browsers */
    color: #70d070;
    font-size: 16px;
    font-style: italic;
}

Also, you can replace ".input-field" class by any other standard CSS selectors, like ID, element, etc. To modify placeholder for text input fields only, you may use such code:

input[type="text"]::placeholder { /* This is CSS rule for all modern browsers */
    color: #70d070;
}

We encourage you to experiment and try different options to make your forms look modern and attractive. Default browser styles aren't suitable for most modern web applications, and sometimes you have to totally change the look and feel, so custom placeholders may be a good starting point.