PhoneGap 构建 webkit-appearance 没有下拉箭头选择标签 [英] PhoneGap build webkit-appearance no drop down arrow for select tag
问题描述
我使用的是 PhoneGap 版本，我的选择标签在手机上没有下拉箭头.我尝试应用 -webkit-appearance: menulist; 但这没有帮助，我尝试了其他选择，但仍然只显示没有下拉箭头的选项.
I'm using PhoneGap build and my select tags have no dropdown arrow on the phone.
I tried applying -webkit-appearance: menulist; but this doesn't help, I tried other choices but still just shows the option with no drop down arrow.
这是 PhoneGap 的一个问题，因为相同的代码在我的 Android 手机的本机浏览器上显示了一个下拉箭头.
It an issue with PhoneGap because the same code shows a dropdown arrow on the native browser on my Android phone.
只有当我使用 PhoneGap build 时，箭头才会消失.有什么解决办法吗?
Only once I use PhoneGap build does the arrow disappear. Any solutions?
推荐答案
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;
}
这篇关于PhoneGap 构建 webkit-appearance 没有下拉箭头选择标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
