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

我正在开发一个移动网站并在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;
}

最佳答案

在浏览器中没有统一的样式来设置本机选择框，更不用说在移动设备中了。

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

您所要做的就是调用$('select').selectboxit();，它将用行为完全相同的样式化html元素替换页面上的所有选择框。祝你好运！

关于html - 如何在Android手机上设置选择元素的样式？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17239612/