放大选择行高

Question

我正在制作一个触摸界面，需要放大选择形式（为了让行eaiser用丛生的手指击中）。有没有其他方法可以放大选择行而不放大文本字体？我知道选择非常有限，你可能会建议使用不同的方法。我对此很清楚。我只是好奇是否有办法放大行而不放大字体文字。 =）

在下图中我有

font-size: 20px;

而且我希望它大约在14-16之间，但是那时的行很难在触摸屏上击中。

下面的下拉菜单的完整css代码

.styledDropDown select{
    background: transparent;
    width: 200px;
    padding: 5px;
    font-size: 20px;
    border: 0px;
    height: 31px;
    -webkit-appearance: none;
    outline: none;
}

.styledDropDown{
    float:right;
    width: 200px;
    height: 31px;
    background:url(../images/bedview/dropDown.png) no-repeat;

}

只能更改背景颜色和字体颜色，但不能更改填充

option { 
background-color:#ddd; /*Works*/
margin:20px; /*don't work*/
padding:20px; /*Don't work*/
}

编辑它在Internet Explorer中有效，但希望它在chrome：/

中工作

Answer 1

据我所知，Chrome不支持为选项提供样式。遗憾。

Answer 2

好吧，如果你只需要它用于镀铬

您可以尝试类似

的内容

http://jsfiddle.net/nyd69/3/

显然这不是最好的结果，但这是我得到的最好的结果

select {
    padding: 10px;
    font-size: 30px;
    -webkit-appearance: button;
}

Answer 3

我正在使用<select>，这没关系 尝试修改CSS中的width和height以查看更改。 我已经在FF测试过，但没有测试过Chrome 如果可以，可以查看fiddle link这个吗？ 感谢。