Home » Html » <select> HTML element with height [duplicate]

<select> HTML element with height [duplicate]

Posted by: admin November 30, 2017 Leave a comment

Questions:

This question already has an answer here:

Answers:

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
@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; } } 
{ /* IE Hacks: targets IE 8, 9 and 10 */ select { height:30px; line-height:30px; } }

Questions:
Answers:

You can also “center” the text with:

vertical-align: middle;