< select>具有高度的HTML元素 [英] <select> HTML element with height

问题描述

有没有人知道一种方式来设置一个HTML选择元素的样式，使其具有一定的高度，并且跨浏览器看起来不错？我尝试简单地在CSS中设置高度，但框中的文本在Firefox中是垂直偏心的。

 < select style =height：1.8em;> 
  

这不是重复的问题。另一个问题询问当您单击select元素时出现的下拉框的高度。

解决方案

我使用了几个CSS黑客和目标Chrome / Safari / Firefox / IE，因为每个浏览器呈现的选择有点不同。我测试了除IE之外的所有浏览器。

对于Safari / Chrome ，将 height 和 line-height 您希望为< select /> 。

对于Firefox ，我们将 kill Firefox的默认填充和边框，然后设置自己的。

对于IE 8 + ，就像Chrome一样，我们设置了 height 和 line-height 属性。这两个媒体查询可以组合。但我为了演示目的保持它分开。 c / c / c / c / c / c / c / c / c / c / c / code>属性在Chrome / Safari OSX中工作，您必须将 background 设置为自定义值。我改变了我的例子中的颜色。

以下是一个jsFiddle： http ：//jsfiddle.net/URgCB/4/

对于非黑客路由，为什么不使用自定义选择插件jQuery？请查看：： http://codepen.io/wallaceerick/pen/ctsCz

HTML：

 < select& 
< option>以下是一个选项< / option> 
< 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 {/ *删除按钮在FF中填充* / 
 border：0; 
 padding：0; 
} 
 @ -moz-document url-prefix（）{/ * targets仅限Firefox * / 
 select {
 padding：15px 0！important; 
} 
} 
 @media screen\0 {/ * IE Hacks：targets IE 8,9和10 * / 
 select {
 height：30px; 
 line-height：30px; 
} 
} 
  

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.

解决方案

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

这篇关于< select>具有高度的HTML元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！