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

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.