overriding placeholder font css in all browsers

css, placeholder, pseudo-element

Solution

You need to make separate declarations for it to work in all browsers, otherwise a conflict will cause undesired results like this.

h1, h2, h3, h4, h5, h6,
button, input, select, textarea {
    font-family: somefont;
}
::-webkit-input-placeholder {
    font-family: somefont;
}
:-moz-placeholder {
    font-family: somefont;
}
::-moz-placeholder {
    font-family: somefont;
}
:-ms-input-placeholder {
    font-family: somefont;
}

Problem

I am trying to override the font of all headers, input, select, text area and input placeholders on my site with the following code: ``` h1, h2, h3, h4, h5, h6, button, input, select, textarea, :-ms-input-placeholder, ::-moz-placeholder, :-moz-placeholder, ::-webkit-input-placeholder { font-family:some font name; } ``` The problem is, for some reason it isn't working on Chrome. If I delete the `:-moz` and `:-ms` references, then chrome works fine, which leads me to believe that Chrome doesn't like pseudo-classes for some reason? I'm stumped, because I can't see why pseudo-classes that have nothing to do with Chrome would make it not work!

Original source