CODEWITHSUNDEEP
htmlcssfirefox
Bob Ren
Bob Ren

Reputation: 2179

Select not positioned properly in firefox, works in chrome/safari

For some reason, my custom styled select input gets pushed upwards in firefox (Works for Chrome/Safari) when placed next to a text input. If I remove the overflow:hidden on the .styled div, the select input pops back into the right place, but has the default down arrow icon.

Is there anyway I can hide the down arrow icon while still having the select element stay in the right place?

Example here (Use firefox to see what's happening): http://jsfiddle.net/Q2sqX/

Thanks so much

Upvotes: 1

Views: 241

Answers (2)

Kevin Bowersox
Kevin Bowersox

Reputation: 94499

Set the vertical-align property to middle in the style.

div.styled { 
    vertical-align: middle; /* Add this */
    display: inline-block;
    overflow:hidden; /* this hides the select's drop button */
    padding:0; 
    margin:0; 
    background: white url(http://www.onextrapixel.com/examples/pure-css-custom-form-elements/formelements-select.png) no-repeat right;
    /* this is the new drop button, in image form */
    width:12em; border-radius:2px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
    border: solid 1px #ccc; 
}

Working Example: http://jsfiddle.net/Q2sqX/5/

Upvotes: 1

Filippos Karapetis
Filippos Karapetis

Reputation: 5204

Try putting a

vertical-align: middle;

inside your div.styled rules

Upvotes: 0

Related Questions