2

我正在制作一个触摸界面，需要放大选择表单（为了使行更容易被笨拙的手指击中）。有没有其他方法可以在不扩大文本字体的情况下扩大选择行？我知道选择非常有限，您可能会建议使用不同的方法。我对此很清楚。我只是好奇是否有办法在不放大字体文本的情况下放大行。=)

在下图中我有

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 中工作：/

4

3 回答 3

0

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

于 2013-05-07T20:26:41.613 回答
0

好吧，如果您只需要 chrome

你可以尝试类似的东西

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

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

select {
    padding: 10px;
    font-size: 30px;
    -webkit-appearance: button;
}
于 2013-05-07T20:34:52.803 回答
0

我正在使用<select>，没关系。
尝试修改width并height在 CSS 中查看更改。我在 FF 中测试过，但没有在 Chrome 中测试过。
如果可以，您可以检查这个小提琴链接吗？
谢谢。

于 2013-05-07T20:41:30.470 回答