Changing an input's HTML5 placeholder color with CSS does not work on Chrome
You forget a :
.
Because of that, the whole selector got corrupted and didn't work.
http://jsfiddle.net/a96f6/87/
Edit:
Seems like (after an update?) this doesn't work anymore, try this:
input::-webkit-input-placeholder{
color:red;
}
input:-moz-placeholder {
color:red;
}
Note: don't mix the vendor prefix selectors (-moz, -webkit, -ms, ...). Chrome for example won't understand "-moz-" and then ignores the whole selector.
Edit for clarification:
To make it work in all browsers, use this code:
::-webkit-input-placeholder {
color:red;
}
::-moz-placeholder {
color:red;
}
::-ms-placeholder {
color:red;
}
::placeholder {
color:red;
}
Change a HTML5 input's placeholder color with CSS
Implementation
There are three different implementations: pseudo-elements, pseudo-classes, and nothing.
- WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element:
::-webkit-input-placeholder
. [Ref] - Mozilla Firefox 4 to 18 is using a pseudo-class:
:-moz-placeholder
(one colon). [Ref] - Mozilla Firefox 19+ is using a pseudo-element:
::-moz-placeholder
, but the old selector will still work for a while. [Ref] - Internet Explorer 10 and 11 are using a pseudo-class:
:-ms-input-placeholder
. [Ref] - April 2017: Most modern browsers support the simple pseudo-element
::placeholder
[Ref]
Internet Explorer 9 and lower does not support the placeholder
attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.
The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding
on an input
will not get the same background color as the pseudo-element.
CSS selectors
User agents are required to ignore a rule with an unknown selector. See Selectors Level 3:
a group of selectors containing an invalid selector is invalid.
So we need separate rules for each browser. Otherwise the whole group would be ignored by all browsers.
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #909;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #909;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #909;
}
::placeholder { /* Most modern browsers support this now. */
color: #909;
}
<input placeholder="Stack Snippets are awesome!">
Change input placeholder color from the Chrome Developer Tools style
If I understood you well, you want to have color picker in Chrome Developer Tool, the same like for font. To do it, follow steps:
- Press F12
Click
+
icon in the top right corner of the right sidebar:Add new rule. Paste your selector and your properties:
Now you can modify your rule in the same way as for font color. I hope this is what you want to achieve
Change a HTML5 input's placeholder color with CSS
Implementation
There are three different implementations: pseudo-elements, pseudo-classes, and nothing.
- WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element:
::-webkit-input-placeholder
. [Ref] - Mozilla Firefox 4 to 18 is using a pseudo-class:
:-moz-placeholder
(one colon). [Ref] - Mozilla Firefox 19+ is using a pseudo-element:
::-moz-placeholder
, but the old selector will still work for a while. [Ref] - Internet Explorer 10 and 11 are using a pseudo-class:
:-ms-input-placeholder
. [Ref] - April 2017: Most modern browsers support the simple pseudo-element
::placeholder
[Ref]
Internet Explorer 9 and lower does not support the placeholder
attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.
The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding
on an input
will not get the same background color as the pseudo-element.
CSS selectors
User agents are required to ignore a rule with an unknown selector. See Selectors Level 3:
a group of selectors containing an invalid selector is invalid.
So we need separate rules for each browser. Otherwise the whole group would be ignored by all browsers.
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #909;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #909;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #909;
}
::placeholder { /* Most modern browsers support this now. */
color: #909;
}
<input placeholder="Stack Snippets are awesome!">
Styling input placeholder (default and focus state) in Chrome 42
If you have a list of comma seperated selectors like that and a browser doesn't recognise even one of those selectors it will ignore all selectors in that list.
In your example, the -moz
prefix for Firefox will not be recognised by Chrome.
The fix is to create separate rules for each different prefix.
Change a HTML5 input's placeholder color with CSS
Implementation
There are three different implementations: pseudo-elements, pseudo-classes, and nothing.
- WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element:
::-webkit-input-placeholder
. [Ref] - Mozilla Firefox 4 to 18 is using a pseudo-class:
:-moz-placeholder
(one colon). [Ref] - Mozilla Firefox 19+ is using a pseudo-element:
::-moz-placeholder
, but the old selector will still work for a while. [Ref] - Internet Explorer 10 and 11 are using a pseudo-class:
:-ms-input-placeholder
. [Ref] - April 2017: Most modern browsers support the simple pseudo-element
::placeholder
[Ref]
Internet Explorer 9 and lower does not support the placeholder
attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.
The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding
on an input
will not get the same background color as the pseudo-element.
CSS selectors
User agents are required to ignore a rule with an unknown selector. See Selectors Level 3:
a group of selectors containing an invalid selector is invalid.
So we need separate rules for each browser. Otherwise the whole group would be ignored by all browsers.
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #909;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #909;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #909;
}
::placeholder { /* Most modern browsers support this now. */
color: #909;
}
<input placeholder="Stack Snippets are awesome!">
::-webkit-input-placeholder does not work
You can't use it single, only with selector:
input::-webkit-input-placeholder {
color: #9B9B9B;
}
input:-ms-input-placeholder {
color: #9B9B9B;
}
input::-moz-placeholder {
color: #9B9B9B;
}
Mixin:
@mixin placeholder($selector, $color) {
#{$selector}::-webkit-input-placeholder {color: $color}
#{$selector}::-moz-placeholder {color: $color}
#{$selector}:-ms-input-placeholder {color: $color}
}
Usage:
@include placeholder('.input-class', #FFFFFF);
Live example
P.S. Do not use them all together (this selector is broken and css parser will always fails):
input::-webkit-input-placeholder,//Not WebKit will fails here
input:-ms-input-placeholder,//Not IE will fails here
input::-moz-placeholder {//Not Firefox will fails here
color: #9B9B9B;
}
Related Topics
How to Stick a Footer to Bottom in CSS
Replace Input Type=File by an Image
Prevent 100Vw from Creating Horizontal Scroll
Twitter Bootstrap 3 - Panels of Equal Height in a Fluid Row
Background Color of Tabs in Shiny Tabpanel
Build List of Selectors with Less
Using Twitter Bootstrap 2.0 - How to Make Equal Column Heights
How to Reverse the Order of Columns in Bootstrap 4
Repeat CSS Background Image a Set Number of Times
Sass Indented Syntax on Multiple Lines
Clip-Path Without Clipping Content
How to Apply a Style to All Children of an Element
How to Apply Border Radius in IE8 and Below IE8 Browsers
How Is Padding-Top as a Percentage Related to the Parent's Width
Up/Down Arrow Key Issue with Typeahead Control (Angular Bootstrap Ui)
Is Box Sizing Inherited If Declared Inside Universal Selector