如何在Android手机上设置选择元素的样式？

Question

我正在开发一个移动网站,并在iPhone和Android手机上进行测试.我使用CSS更改了页面上选择框的外观.

这在iPhone浏览器中显示良好,但在Android中不能正确应用样式.原始下拉箭头仍然存在(并且由于height属性而垂直拉伸).

有没有办法告诉浏览器如何在Android设备上设置这个元素的样式？还是不支持？

以下是我的代码示例:

HTML:

<div class="filter-group">
    <select class="bigInput" id="f_eventWho" name="f_eventWho" tabindex="1">
        <option id="f_public" selected="selected">For Everyone</option>
        <option id="f_private">By invitation</option>
        <option id="f_both">All Gatherings</option>
    </select>
</div>

CSS:

.bigInput
{width: 125px;
height: 50px;
background-size: 15px;
background: rgb(159, 209, 225) url(../img/small_down_arrow_20.png) no-repeat right;
border: none;
margin: 5px;
font-size: 14px;
}

Answer 1

没有一致的方法可以在浏览器中设置原生选择框的样式,更不用说在移动设备中了.

我发现最好的解决方法是创建一个模拟selectbox行为的HTML下拉列表 - 如果您使用的是JQuery,我强烈推荐SelectBoxIt:http://gregfranko.com/jquery.selectBoxIt.js/

你所要做的就是打电话 $('select').selectboxit();它,它会替换页面上所有选择框,其中的样式html元素的行为完全相同.祝你好运!