Placeholder projects often encounter the need to modify the input color of the placeholder. Here’s a look at how the placeholder is set with CSS.

First, take a look at Chrome’s default input style

<input type="text" placeholder="hello world">
Copy the code

(placeholder)

(input style)

You can see that the default colors for placeholder and input are a little different. Now let’s change the input color

<input type="text" placeholder="hello world" style="color: red">
Copy the code

(placeholder)

(input)

You’ll notice that the color attribute only changes the input color, and the placeholder color doesn’t change at all. So, how to change the color of the placeholder.

The way to change the color of the placeholder is to use the pseudo ::placeholder

<style> input::placeholder { color: green; } </style> <input type="text" placeholder="hello world" style="color: red;" >Copy the code

(placeholder)

(input)

Note the compatibility of palceHolder pseudo-classes. This is the result of running the same code in Chrome as in IE11

(placeholder – ie11)

(input – ie11)

IE solution:

First, IE9 and below don’t support placeholder. IE10 requires :-ms-input-placeholder, and attributes need to be added! Important Increases the priority.

<style> input:-ms-input-placeholder { color: green ! important; } </style> <input type="text" placeholder="hello world" style="color: red;" >Copy the code

(placeholder ie11)

(input ie11)

Then the adaptation scheme of other browsers is given

/ * - Chrome 56 or less, - iOS Safari 4.2-10.2 - Opera 15-43 - Opera Mobile >12 - Android Browser 2.1-4.4.4 - Samsung Internet - UC Browser for Android - QQ Browser */ ::-webkit-input-placeholder { color: #ccc; font-weight: 400; } /* Firefox 4-18 */ :-moz-placeholder { color: #ccc; font-weight: 400; } /* Firefox 19-50 */ ::-moz-placeholder { color: #ccc; font-weight: 400; } /* -mS-input-placeholder {color: # CCC! important; font-weight: 400 ! important; } /* Edge (also supports ::-webkit-input-placeholder) */ ::-ms-input-placeholder { color: #ccc; font-weight: 400; } /* CSS Working Draft */ ::placeholder { color: #ccc; font-weight: 400; }Copy the code