Reputation: 2179
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
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
Reputation: 5204
Try putting a
vertical-align: middle;
inside your div.styled rules
Upvotes: 0