Applying css rule for different browser specific selectors

Question

I want to target the placeholder across multiple browsers like this

.editor textarea::-webkit-input-placeholder, 
.editor textarea:-moz-placeholder, 
.editor textarea::-moz-placeholder, 
.editor textarea:-ms-input-placeholder
{
    color: red;
}

but this does not work

Do I have to do it separately for each

.editor textarea:-ms-input-placeholder
{
    color: red;
}

The html is as follows:

<div class="editor">
<textarea placeholder="This will be the heading sentence..."></textarea>
</div>

or is there another way?

(sorry for the noob question)

Thanks!

In short, you can't do it. Check this answer http://stackoverflow.com/a/2610741/5794995 — lucian.nicolaescu, Jan 16 '16 at 10:25

score 2 · Accepted Answer · edited May 23 '17 at 12:23

2

User agents are required to ignore a rule with an unknown selector.

*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.

Check this answer https://stackoverflow.com/a/2610741/5794995

edited May 23 '17 at 12:23

Community

1
1

answered Jan 16 '16 at 10:27

lucian.nicolaescu

647
3
9

Applying css rule for different browser specific selectors

1 Answers1