Javascript 当设置为背景色时，HTML选择框在android版本4.0上不显示下拉箭头

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

但在安卓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>

1.
2.
3.
4.
5.

像这样的东西可能会在稍后重新计算，因为孩子们的外视在当时的android上是错误的（正如我前面提到的）

window.setTimeout（函数（）{$（window.trigger（'resize'）；}，1500）

…可能有用吗？是的，这似乎有帮助

---

显然，您只希望在初始加载阶段结束后触发一次（这是规范的明显错误，其他所有人目前都在遵守该规范）。

Android浏览器对

s的呈现有缺陷，如果应用了背景或边框，将删除正常样式

因为

s看起来不像

s是一个很大的可用性问题，所以最好不要只为这个浏览器设计它们

不幸的是，没有选择/排除Android浏览器的纯CSS方法，因此我建议您使用布局引擎（），它将在

标记中添加一类

.Browser Android

然后，您可以设置除Android浏览器之外的所有

的样式，如下所示：

html:not(.browser-android) select {
    background: #0f0;
    border: 1px solid #ff0;
}

---

如Matt所示，如果在菜单上应用任何类型的边框或背景，则会使下拉箭头消失

---

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

我也遇到了同样的问题&我一直想知道为什么会发生这种情况，因为其他一些项目没有发生这种情况

在试图了解Bootstrap和Foundation框架的基础上，我发现了Bootstrap的解决方案，因为如果我们提到了下界的边界或背景，他们在某些移动设备上提出了这个问题。 我不是从任何一个信贷，但想分享的网页链接，其中提到了它和解决方案也给出了

引导：

JS Bin：

我希望这将对其他可能面临此问题的人有用。此解决方案与引导相关我可以修改你的项目需要

<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>

var nua=navigator.userAgent；
变量为安卓=（（nua.indexOf（'Mozilla/5.0'）>-1和&nua.indexOf（'android'）>-1和&nua.indexOf（'AppleWebKit'）>-1）和&！（nua.indexOf（'Chrome'）>-1））；
如果（是安卓系统）{
$（'select.form-control'）.removeClass（'form-control'）.css（'width'，'100%”）；
}

如果您不想使用JavaScript实现这一目的和/或只是对UA嗅探感到不好（这是您应该做的），但可以针对少数浏览器：

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

值得注意的缺席者都是IEs（Edge将获得完整样式）：

---

您是否尝试过删除

高度

和/或

字体大小

属性？这里有一个Android官方的bug：有点晚了，但我偶然发现了类似的东西，我发现我有一个样式-webkit外观：无；我删除了那个样式，它又重新出现了。这篇文章在Bootstrap官方文档中提到过，还有其他方法可以解决这个问题吗！除了不应用样式之外，我们是否可以像android浏览器那样添加样式？@Amol Ghotankar不，据我所知不是。一旦应用了样式，它们就会呈现为文本框：（谢谢！让我们看看是否还有其他方法可以用，因为如果我的项目中有100个选择框，我将不得不继续向所有选择框中添加这个额外的类。我还经常使用js添加和删除类，这样对我来说就更复杂了。嗯，“.ua android浏览器”似乎已经消失了，至少在4.2.2中是这样。我想使用“.ua android”或“.ua mobile”或“.ua mobile android”可能会解决这个问题，但android的Chrome无法区分。所以我想我现在会选择非样式选择。@布局引擎的escapedcat v0.7.0消除了对CssUserAgent的需要，并将android浏览器类名更改为.Browser android。我已经更新了我的答案以反映这一点