Italicizing placeholder using css pseudo elements does not work if css is written in a single line

Question

I want to italicize the placeholder of a html input textbox. I am trying to achieve it using pseudo-elements in css. I am observing a strange behavior. When the pseudo elements are in a single line it does not work i.e. the placeholder text is not in italic, and when the pseudo-elements are in different lines, it works.

I have created a fiddle (http://jsfiddle.net/aniruddha/VZ43T/3) to demonstrate the problem. Version 2 of the same fiddle demonstrates the working code

Not working:

.filterBox::-webkit-input-placeholder, .filterBox::-moz-placeholder, .filterBox::-ms-input-placeholder {
    font-style: italic;
}

Working:

.filterBox::-webkit-input-placeholder {
    font-style: italic;
}
.filterBox::-moz-placeholder {
    font-style: italic;
}
.filterBox::-ms-input-placeholder {
    font-style: italic;
}

Why doesn't it work when pseudo-elements are in the same line? CSS Validator (http://jigsaw.w3.org/css-validator/validator) says that both the css are valid for CSS Level 3.

Thanks, Aniruddha

If you scroll down the validation results page, you will see that it complains about vendor extended pseudo-elements, which all these are. — BoltClock, Dec 13 '13 at 07:07

score 3 · Answer 1 · answered Dec 13 '13 at 07:06

Because they're vendor-specific pseudo-elements, they are not part of the CSS Specifications. One browser will accept only one of them, and will fail at the others, then failing the entire rule. Separating them out is the only way to stop this from happening.

It's like having invalid CSS syntax in your rule--the entire rule fails.

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

The selector (see the Selectors module [SELECT]) consists of everything up to (but not including) the first left curly brace ({). A selector always goes together with a {}-block. When a user agent can't parse the selector (i.e., it is not valid CSS3), it must ignore the {}-block as well.

Refered this link: Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?

For more info refer the Rules Sets of CSS3

Why Grouping of Pseudo element Fails

Italicizing placeholder using css pseudo elements does not work if css is written in a single line

2 Answers2