CODEWITHSUNDEEP
firefoxselectvertical-alignmentcss
forkie
forkie

Reputation: 602

text vertical align in select box - firefox issue

I've got a problem with vertical align of select box caption in Firefox.

screen from Firefox

CSS for select looks like this:

select#cities_list {
    width: 95px;
    height: 45px;
    line-height: 45px;
    background: url('./img/select-arrow.png') no-repeat right transparent;
    -webkit-appearance: none;
    border: 1px solid #dcdcdc;
    border-left: none;
    border-right: none;
    padding: 0 10px;
    margin: 0;
    float: left;
}

In Chrome everything looks fine:

enter image description here

Help!

Upvotes: 8

Views: 9130

Answers (2)

Jarrod
Jarrod

Reputation: 9465

Another method, one that I prefer, is this:

@-moz-document url-prefix() {

    select {
        padding-top: 8px;
    }
}

Set the padding-top to whatever you like. Anything within the @-moz-document url-prefix() brackets will execute on Firefox only.

Upvotes: 1

nirupam
nirupam

Reputation: 401

You may try this

padding:.3em;/.4em;

depending on your configuration.

Upvotes: 14

Related Questions