Question

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

这在iPhone浏览器中显示效果不错，但在Android中并未正确应用这些样式。原始下拉箭头仍然存在（并且由于高度属性而垂直拉伸）。

有没有办法告诉浏览器如何在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元素的行为完全相同。祝你好运！

Answer 2

最好的解决方案是不要尝试选择元素，特别是不要在移动设备上。

这样做既损害了可用性和性能，又让你的中间人注意到访问者并让他们知道你根本不关心他们。

请尝试证明巨大的开销（请查看像selectBoxIt这样的lib将对页面重量做什么），你将添加你将提供给访问者的好处（最多为零）。

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

2 个答案: