使用背景颜色设置时，HTML 选择框在 android 版本 4.0 上不显示下拉箭头 [英] HTML select box not showing drop-down arrow on android version 4.0 when set with background color
问题描述
我需要将选择框的背景颜色设置为黄色.当我测试时，它确实在 android 2.3 和 android 3.0 上显示带有黄色和箭头的框.
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 4.0 上，它显示选择为完整的黄色，没有下拉箭头.
But on android 4.0 it shows the select as complete yellow without the drop-down arrow.
知道如何解决问题吗?
我正在用 phone-gap 设计这个.
I am designing this with phone-gap.
这是我为 html select 设置背景颜色的代码.
This is my code where i am setting background-color for 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>
推荐答案
Android 浏览器对 s 的渲染有问题，如果应用了背景或边框，将会移除正常样式.
The Android Browser's rendering of <select>s is buggy and will remove the normal styling if a background or border is applied.
由于 s 看起来不像 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.
不幸的是，没有纯 CSS 方式来选择/排除 Android 浏览器，因此我建议您使用布局引擎 (https://github.com/stowball/Layout-Engine)，这会在 中添加一个 .browser-android 类标签.
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-android to the <html> tag.
然后您可以设置所有 的样式，Android 浏览器除外，如下所示:
You could then style all <select>s except on Android Browser, like so:
html:not(.browser-android) select {
background: #0f0;
border: 1px solid #ff0;
}
这篇关于使用背景颜色设置时，HTML 选择框在 android 版本 4.0 上不显示下拉箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
