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;
}
}