0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | /* WebKit browsers */ ::-webkit-input-placeholder { color: #045FB4; } /* Mozilla Firefox 4 to 18 */ :-moz-placeholder { color: #045FB4; opacity: 1; } /* Mozilla Firefox 19+ */ ::-moz-placeholder { color: #045FB4; opacity: 1; } /* Internet Explorer 10+ */ :-ms-input-placeholder { color: #045FB4; } |
It’s the code snippet to change HTML5 placeholder color with CSS which are used in form input and textarea fields. The explanation and uses notes are as below:
- WebKit and Blink browsers (Safari, Google Chrome, Opera 15+) are using a pseudo-element:
::-webkit-input-placeholder. - Mozilla Firefox 4 to 18 is using a pseudo-class:
:-moz-placeholder(one colon). - Mozilla Firefox 19+ is using a pseudo-element:
::-moz-placeholder, but the old selector will still work for a while. - Internet Explorer 10 is using a pseudo-class:
:-ms-input-placeholder. - Opera up to version 12 and IE up to version 9 do not support any CSS selector for placeholders.
- Firefox’s placeholder appears to be defaulting with a reduced opacity, so we need to use
opacity: 1here. - Most importantly, don’t mix all them into one group since one invalid selector in a group makes the whole group invalid. So make a separate rule for every selector.
And your HTML inputs are:
0 1 2 | <input type="text" placeholder="Input text"> <textarea placeholder="Input content"></textarea> |
this code! not worked for textarea placeholder color!!
These CSS rules are working at my end. Please check browser compatibility as mentioned above and give me url of the page so I can have a look