Question

In chrome I had this CSS :

input::-webkit-input-placeholder{color:blue;}
input:-moz-placeholder{color:blue;}

Idecided to optimize it to:

input::-webkit-input-placeholder, input:-moz-placeholder{color:blue;}

And the placeholder disappered! Why is this happenning – some kind of bug or what?

And the other problem is Opera:
‘placeholder’ in document.createElement(‘input’) returns true. So this means that it is available. But it is not showing.

The rest of the CSS for the input(if needed):

input[type=text]{
    color: blue;
    height: 24px; width: 75px;
    padding-left: 24px;
    outline: none;
    background-color: #ABABAB;
    background-image: url('searchtool-1.png');
    background-repeat: no-repeat;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
       -moz-border-radius-bottomright: 6px;
       -moz-border-radius-bottomleft: 6px;
            border-bottom-right-radius: 6px;
            border-bottom-left-radius: 6px;
}

Edit: demo

Answer 1

While you can mix unknown CSS properties, you can not mix different unknown CSS selectors. If a browser sees an unknown selector, it will ignore the hole block.

This is by CSS specification.

You should also use: :-ms-input-placeholder for IE10.

Opera should support the placeholder in input elements. Ca you make a fiddle?