CODEWITHSUNDEEP
cssgoogle-chromefirefoxselect
Filippo oretti
Filippo oretti

Reputation: 49883

CSS select box good on Chrome bad in Firefox

i'm just trying styling the select box both for webkit and moz browsers , on webkit it looks great but in Firefox it looks so bad, the default option is not vertical aligned with the select box.

Can you help me out finding whats wrong with this code please:

CSS:

select{
    min-width: 100%;
    width:inherit;
    background: #fff;
    height: 33px;
    border-radius:5px;
    font-size: 15px;
    border:none;
    box-shadow: 0px 0px 30px 20px rgba(255,255,255,0.5) inset,0px 0px 0px 1px #ccc;
}select option,select option:hover{
    padding:5px;
}

HTML

<select>
    <option>hey</option>
    <option>hey2</option>
    <option>hey3</option>

</select>

Here a fiddle so you can see how it looks on Firefox and then in Chrome :/ unbelievable!!

http://jsfiddle.net/wL8Rs/

I'm using Chrome latest 34.0 version and Firefox latest 29.0 version

Upvotes: 1

Views: 2200

Answers (1)

Eugeny
Eugeny

Reputation: 56

Add padding to select

select{
     min-width: 100%;
     width:inherit;
     background: #fff;
     height: 33px;
     border-radius:5px;
     font-size: 15px;
     padding:5px;
     border:none;
     box-shadow: 0px 0px 30px 20px rgba(255,255,255,0.5) inset,0px 0px 0px 1px #ccc;
}

http://jsfiddle.net/wL8Rs/3/

Upvotes: 4

Related Questions