Problem when styling a placeholder based on a class in CSS

1

I'm trying to make sure I can have several types of placeholder based on a defined class like this:

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

The problem is that if I define it that way it does not work, I can not understand why I can not style numerous elements next to CSS when it comes to placeholder ... does anyone have a light?

EDIT

I realized that if I declare each separate selector it works, but it is not "pretty" to see when you are creating the codes. So:

.red {
    color: red;
}

    .red::-webkit-input-placeholder {
        color: red;
    }

    .red:-moz-placeholder {
        color: red;
    }

    .red::-moz-placeholder {
        color: #fff !important;
    }

    .red:-ms-input-placeholder {
        color: #fff !important;
    }
    
asked by anonymous 10.04.2016 / 22:31

1 answer

3

I'm glad you solved the problem yourself.

The only solution I have found to date has been using this method of declaring the rules separately.

I believe this is necessary because when the browser does not recognize a selector it ignores the entire rule. So when the webkit does not recognize the firefox selector it ignores the CSS rule, and the opposite is also true.

    
10.04.2016 / 22:56