Browser specific CSS padding for firefox field

Question

I have a dropdown list in my application whereby in order to center it I must add padding-top 10px while on Mozilla Firefox but on google chrome it does not need the padding. How can I target the select list to set this browser specific. I was hoping I could have done something like the following:

select {
  -moz-padding-top: 10px;
  -webkit-padding-top: 0px;
}

Any ideas of how I could get round this? Fiddle of problem shown below, if you check this in Chrome and then Firefox, I want it so that text is always in middle

http://jsfiddle.net/uHDa6/

Answer 1

Note: the first part of this answer is now obsolete, as this feature has been removed from Firefox. For the real answer, read on from "However".

---

The answer to your question is: yes, it's possible to put Mozilla-specific CSS in a stylesheet. (Not in an inline style attribute.)
In this case, you would write

@-moz-document url-prefix() {
    select {padding-top:10px;}
}

which is simply the Mozilla-prefixed version of the @document rule, that is not recognised by other browsers.

---

However, the actual solution to the problem of the mismatched text position is to not set the height, but only the padding of the select. No hacks.

style="font-size: 14px; padding: 11px 0 11px 5px;"

That has the desired effect in all browsers. See new fiddle.