<select>具有高度的HTML元素

有谁知道样式化HTML选择元素的方式，以便它具有一定的高度，并且在浏览器中看起来不错？我试着简单地在CSS中设置高度，但是框中的文本在Firefox中是垂直偏离中心的。<select>具有高度的HTML元素

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

这不是一个重复的问题。另一个问题是关于单击select元素时出现的下拉框的高度。我的问题是关于未点击的select元素的高度。

来源

2013-12-09 stackoverflowrocks

使用'行height'。将该值设置为您设置的高度。例如，'line-height：40px;' –

分享你已有的代码。 –

你指的是什么元素（div，table，span，...）？你可以张贴代码.... –

我用了几个CSS黑客和针对个人的Chrome/Safari浏览器/火狐/ IE，因为每个浏览器渲染选择有点不同。我测试过除IE以外的所有浏览器。

对于Safari /铬，设置height和line-height你想为你<select />。

对于Firefox，我们要杀 Firefox的默认填充和边界，然后设置我们自己。设置填充任何你喜欢的。

对于IE 8+，就像浏览器，我们设置了height和line-height性能。这两个media queries可以合并。但为了演示目的，我保持独立。所以你可以看到我在做什么。

请注意，为height/line-height属性在Chrome/Safari的OSX工作，你必须设置background为自定义值。我改变了我的例子中的颜色。

这里的下方的jsfiddle：http://jsfiddle.net/URgCB/4/

对于非黑客的路线，为什么不通过jQuery使用自定义选择Plug-in？看看这个：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; 
    }  
}

来源

2013-12-09 18:32:59

这在我的测试中似乎对高度没有任何影响。 – stackoverflowrocks

Mike，你可以在Firefox中加载你的jsfiddle例子吗？在24.1.1上，文本被固定在选择框的顶部。 – stackoverflowrocks

我现在看到...让我调查。 –

-3

您可以用也“中心”的文本：

vertical-align: middle;

来源

2013-12-09 18:26:16

垂直对齐仅适用于“表格”和“内嵌”元素。 –

@MikeBarwick select元素*是* inline – cimmanon

是的，你说得对。 –

<select>具有高度的HTML元素

回答

相关问题