0

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

2 回答 2

5

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

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

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

于 2013-06-21T17:50:44.473 回答
2

最好的解决方案是不要尝试和样式选择元素，尤其是在移动设备上。

这样做会损害可用性和性能，它会向访问者竖起中指，让他们知道你真的根本不关心他们。

请尝试证明巨大的开销是合理的（请查看像 selectBoxIt 这样的库对页面权重的影响），您将增加您将为访问者提供的好处（最多为零）。

于 2014-08-18T17:49:32.207 回答