Why are commas rule separators not being applied in css?
If I apply the following rule to an input element with id #one
, then the color of the placeholder changes,
#one::-webkit-input-placeholder {
color: red;
}
But if I use comma separator to combine placeholder rules of different browsers, then the color doesn't apply, eg.
#two::-webkit-input-placeholder,
#two::-moz-placeholder{
color: red;
}
Working example:
#one::-webkit-input-placeholder {
color: red;
}
#two::-webkit-input-placeholder,
#two::-moz-placeholder{
color: red;
}
<input id="one" type="text" placeholder="one">
<input id="two" type="text" placeholder="two">
Why #two
doesn't the placeholder change color to red?
source to share
This is because the browser only applies a form of the rule that it can fully interpret. For a browser like webkit is -webkit-input-placeholder
valid but -moz-placeholder
not, so it destroys the entire selector and vice versa - for a geeko based browser.
The solution is to decouple the specific browser settings.
#two::-webkit-input-placeholder{
color: red;
}
#two::-moz-placeholder{
color: red;
}
source to share
I know this is the complete answer now, but you can add different classes for each input
#one::-webkit-input-placeholder {
color: red;
}
#two::-webkit-input-placeholder{
color: red;
}
#two::-moz-placeholder{
color: red;
}
<input id="one" type="text" placeholder="one">
<input id="two" type="text" placeholder="two">
source to share