Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change an input's HTML5 placeholder color with inline CSS [duplicate]

Reading the SO posting "Change an input's HTML5 placeholder color with CSS" I think I understand how to do it with an external CSS.

Even after searching through Google and SO I found no way to make this also work with inline CSS (I'm aware that inline CSS should be avoided).

E.g. something like:

<input type="text" placeholder="Enter something" style="???" />

For the ??? part I have no idea what to enter in order to change the color of the placeholder text.

So my question is:

Is it possible to use inline CSS to change the color of a placeholder text? If yes, how to do it?

like image 946
Uwe Keim Avatar asked Jul 03 '14 05:07

Uwe Keim


People also ask

Is it possible to change the color in an html5 input placeholder?

In most browsers, the placeholder text is grey. To change this, style the placeholder with the non-standard ::placeholder selector. Note that Firefox adds a lower opacity to the placeholder, so we use opacity: 1 to fix this.

How do I use placeholder style in CSS?

The ::placeholder selector selects form elements with placeholder text, and let you style the placeholder text. The placeholder text is set with the placeholder attribute, which specifies a hint that describes the expected value of an input field.


1 Answers

As far as I know, you certainly cannot. But you can do this with css

input::-webkit-input-placeholder { /* WebKit browsers */
    color:    #fff;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #fff;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #fff;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #fff;
}
like image 96
Mohamed El Mahallawy Avatar answered Oct 22 '22 13:10

Mohamed El Mahallawy