23

我需要将选择框的背景颜色设置为黄色。当我测试时，它确实在 android 2.3 和 android 3.0 上显示带有黄色和箭头的框。

但在 android 4.0 上，它将选择显示为完全黄色，没有下拉箭头。

知道如何解决这个问题吗？

我正在用电话间隙设计这个。

这是我为 html 选择设置背景颜色的代码。

<select style="background-color:#FFFF00;border:#FFFF00;height:25px;font-family:Arial, Helvetica, sans-serif; color:#000000; font-size:14px; font-weight:bold; text-align:center;">
          <option></option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>

        </select>
4

5 回答 5

18

Android 浏览器对<select>s 的渲染是错误的，如果应用了背景或边框，它将删除正常的样式。

由于<select>s 看起来不像<select>s 是一个相当大的可用性问题，所以最好的办法是不要只为这个浏览器设置样式。

不幸的是，没有纯 CSS 方式来选择/排除 Android 浏览器，所以我建议您使用布局引擎（https://github.com/stowball/Layout-Engine.browser-android ），它会在<html>标签中添加一个类。

然后，您可以<select>设置除 Android 浏览器之外的所有 s 的样式，如下所示：

html:not(.browser-android) select {
    background: #0f0;
    border: 1px solid #ff0;
}
于 2013-02-13T09:58:03.373 回答
5

我遇到了同样的问题，直到现在我还想知道为什么会发生这种情况，因为其他一些项目不会发生这种情况。

在尝试了解有关 Bootstrap 和 Foundation Framework 的更多信息时，我在 bootstrap 上找到了解决方案，因为如果我们提到下拉菜单的边框或背景，他们已经在某些移动设备上提出了这个问题。

我没有从任何人那里获得荣誉，但想分享提到它的页面链接并给出解决方案

引导程序：https ://getbootstrap.com/docs/4.0/getting-started/browsers-devices/#select-menu

JS斌：http: //jsbin.com/OyaqoDO/2

我希望这对可能面临此问题的其他人有用，此解决方案与引导程序有关。& 我可以根据您的项目需求进行修改吗？

<script>
var nua = navigator.userAgent;
var is_android = ((nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1) && !(nua.indexOf('Chrome') > -1));
if(is_android) {
        $('select.form-control').removeClass('form-control').css('width', '100%');

}
</script>
于 2014-06-29T05:31:07.003 回答
0

像这样的东西可能会在片刻之后重新计算，因为当时孩子的 outerHeight 在 android 上是错误的（正如我之前提到的）。

window.setTimeout(function() {$(window).trigger('resize');}, 1500);

……可以吗？是的，这似乎有帮助。

显然，您只希望在初始加载阶段有时间过去后触发一次（在规范的明显错误中，所有其他人目前都在遵守）。

于 2013-02-08T13:28:49.840 回答
0

正如马特所指出的，如果您将任何类型的边框或背景应用于菜单，您将蒸发下拉箭头。

最简单的解决方案，只需删除任何边框或自定义背景颜色。这将在 Android 设备上为您留下漂亮的白色和灰色“现代”下拉箭头。我认为没有任何网站不适合它。

于 2013-09-05T06:31:55.993 回答
0

如果您不想为此使用 JavaScript 和/或只是对 UA 嗅探感觉不好（您应该这样做），但可以少针对少数浏览器：

select
{
    /* common, “safe” styles */
}
@supports (appearance: none)
{
    select
    {
        /* borders and backgrounds */
    }
}

值得注意的缺席者都是 IE（Edge 将获得完整的样式）： http ://caniuse.com/#feat=css-featurequeries

于 2016-06-01T08:41:24.860 回答