select css 高度,css - <select> HTML element with height - Stack Overflow

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 .

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:

Here's one option

here's another option

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;

}

}