<select> HTML element with height [duplicate]

Question

Does anyone know of a way to style an HTML select element so that it has a certain height and looks good across browsers? I've tried simply setting height in CSS but the text inside the box is vertically off-center in Firefox.

<select style="height:1.8em;">

This is not a duplicate question. The other question asks about the height of the drop-down box that appears when you click on a select element. My question is about the height of the unclicked select element.

Answer 1

I've used a few CSS hacks and targeted Chrome/Safari/Firefox/IE individually, as each browser renders selects a bit differently. I've tested on all browsers except IE.

For Safari/Chrome, set the height and line-height you want for your <select />.

For Firefox, we're going to kill Firefox's default padding and border, then set our own. Set padding to whatever you like.

For IE 8+, just like Chrome, we've set the height and line-height properties. These two media queries can be combined. But I kept it separate for demo purposes. So you can see what I'm doing.

Please note, for the height/line-height property to work in Chrome/Safari OSX, you must set the background to a custom value. I changed the color in my example.

Here's a jsFiddle of the below: http://jsfiddle.net/URgCB/4/

For the non-hack route, why not use a custom select plug-in via jQuery? Check out this: http://codepen.io/wallaceerick/pen/ctsCz

HTML:

<select>     <option>Here's one option</option>     <option>here's another option</option> </select> 

CSS:

@media screen and (-webkit-min-device-pixel-ratio:0) {  /*safari and chrome*/     select {         height:30px;         line-height:30px;         background:#f4f4f4;     }  } select::-moz-focus-inner { /*Remove button padding in FF*/      border: 0;     padding: 0; } @-moz-document url-prefix() { /* targets Firefox only */     select {         padding: 15px 0!important;     } }         @media screen\0 { /* IE Hacks: targets IE 8, 9 and 10 */             select {         height:30px;         line-height:30px;     }      }