Javascript 使用背景颜色设置时，HTML 选择框在 android 版本 4.0 上不显示下拉箭头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14744437/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML select box not showing drop-down arrow on android version 4.0 when set with background color
提问by Mayukh Raaj
I need to set the background color for select box as yellow. When i tested,it does show box with yellow color and arrow on android 2.3 and android 3.0.
我需要将选择框的背景颜色设置为黄色。当我测试时，它确实在 android 2.3 和 android 3.0 上显示带有黄色和箭头的框。
But on android 4.0 it shows the select as complete yellow without the drop-down arrow.
但在 android 4.0 上，它将选择显示为完整的黄色而没有下拉箭头。
Any idea how to resolve the issue?
知道如何解决这个问题吗？
I am designing this with phone-gap.
我正在用电话间隙设计这个。
This is my code where i am setting background-color for html select.
这是我为 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>
回答by Matt Stow
The Android Browser's rendering of <select>s is buggy and will remove the normal styling if a background or border is applied.
Android 浏览器对<select>s的渲染有问题，如果应用了背景或边框，则会删除正常样式。
Since <select>s not looking like <select>s is a pretty big usability issue, your best bet is to not style them for this browser only.
由于<select>s 看起来不像<select>s 是一个非常大的可用性问题，因此最好不要仅针对此浏览器设置它们的样式。
Unfortunately, there's no pure CSS way of selecting/excluding the Android Browser, so I recommend you use Layout Engine (https://github.com/stowball/Layout-Engine), which will add a class of .browser-androidto the <html>tag.
不幸的是，没有纯 CSS 方式来选择/排除 Android 浏览器，因此我建议您使用 Layout Engine ( https://github.com/stowball/Layout-Engine)，它将.browser-android为<html>标签添加一个类。
You could then style all <select>s except on Android Browser, like so:
然后，您可以设置<select>除 Android 浏览器之外的所有s 的样式，如下所示：
html:not(.browser-android) select {
background: #0f0;
border: 1px solid #ff0;
}
回答by Learning
I had this same issue & i was wondering till now why this is happening as it don't not happen on some of the other projects.
我有同样的问题，直到现在我想知道为什么会发生这种情况，因为它不会发生在其他一些项目中。
While trying to learn more about Bootstrap & Foundation Framework i found the solution on bootstrap as they have raised this problem on some mobile device if we mentioned border or background for the drop-downs.
在尝试了解有关 Bootstrap 和 Foundation Framework 的更多信息时，我在 bootstrap 上找到了解决方案，因为如果我们提到下拉菜单的边框或背景，它们会在某些移动设备上提出此问题。
I am not taking credit from any one but would like to share links of page where it is mentioned & solution is also given
我没有从任何人那里获得荣誉，但想分享提到它的页面链接，并且还给出了解决方案
Bootstrap: https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/#select-menu
引导程序：https: //getbootstrap.com/docs/4.0/getting-started/browsers-devices/#select-menu
JS Bin: http://jsbin.com/OyaqoDO/2
JS 斌：http: //jsbin.com/OyaqoDO/2
I hope this will be useful to other who might face this issue this solution is related to bootstrap. & can me modified to your project needs.
我希望这对可能面临此问题的其他人有用，此解决方案与引导程序有关。& 我可以根据您的项目需要进行修改吗？
<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>
回答by saji
If you don't want to use JavaScript for that and/or just feel bad about UA sniffing (as you should), but are okay with targeting few browsers less:
如果你不想为此使用 JavaScript 和/或只是对 UA 嗅探感觉不好（你应该这样做），但可以少定位几个浏览器：
select
{
/* common, “safe” styles */
}
@supports (appearance: none)
{
select
{
/* borders and backgrounds */
}
}
Noticeable absentees are all of IEs (Edge will get full styles): http://caniuse.com/#feat=css-featurequeries
值得注意的缺席者都是 IE（Edge 将获得完整样式）：http: //caniuse.com/#feat=css-featurequeries
回答by Compworth
As Matt indicated if you apply any type of border or background to the menu you will vaporize the drop down arrow.
正如马特指出的那样，如果您将任何类型的边框或背景应用于菜单，您就会使下拉箭头蒸发。
Simplest solution, just remove any border or custom background color. This will leave you with a nice white and gray "modern" looking drop down arrow on Android devices. I don't think there are any sites that it wouldn't fit fine in.
最简单的解决方案，只需删除任何边框或自定义背景颜色。这将为您留下一个漂亮的白色和灰色的“现代”外观在 Android 设备上的下拉箭头。我认为没有任何网站不适合它。
回答by MistereeDevlord
something like this might work to recalculate a moment after since the outerHeight of the children was wrong on android at the time (as I mentioned earlier).
像这样的事情可能会在一段时间后重新计算，因为当时 android 上孩子的外层高度是错误的（正如我之前提到的）。
window.setTimeout(function() {$(window).trigger('resize');}, 1500);
window.setTimeout(function() {$(window).trigger('resize');}, 1500);
...might work? Yes that seems to help.
……能用吗？是的，这似乎有帮助。
Obviously you just want this to trigger once after the initial loading phase has had time to pass (in obvious error of the spec, which all others are currently complying with).
显然，您只希望在初始加载阶段通过后触发一次（这是规范的明显错误，所有其他人目前都遵守）。
