Question

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

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

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

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

这是我的代码，我为html select设置背景颜色。

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

Answer 1

Android浏览器的<select>呈现效果不佳，如果应用背景或边框，则会删除正常样式。

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

不幸的是，没有选择/排除Android浏览器的纯CSS方式，因此我建议您使用布局引擎（https://github.com/stowball/Layout-Engine），这将为.browser-android添加<html>类} tag。

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

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

Answer 2

我有同样的问题＆amp;我想知道为什么会这样，因为它不会发生在其他一些项目上。

在尝试了解有关Bootstrap＆amp ;;的更多信息时基础框架我在bootstrap上找到了解决方案，因为他们在某些移动设备上提出了这个问题，如果我们提到下拉的边框或背景。

我不是从任何人那里获得赞誉，而是想分享其中提及的页面的链接＆amp;解决方案也给出了

Bootstrap：https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/#select-menu

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

我希望这对于可能面临此问题的其他人有用，此解决方案与bootstrap有关。＆安培;我可以根据您的项目需求进行修改。

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

Answer 3

这样的事情可能会重新计算一下，因为那时孩子的外部高度是错误的（正如我之前提到的那样）。

window.setTimeout（function（）{$（window）.trigger（'resize'）;}，1500）;

......可能有用吗？是的，似乎有所帮助。

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

Answer 4

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

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

Answer 5

如果您不想使用JavaScript和/或只是对UA嗅探感觉不好（如您所愿），但可以更少针对少数浏览器：

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

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

当使用背景颜色设置时，HTML选择框不显示Android 4.0版本上的下拉箭头

5 个答案: