PhoneGap 构建 webkit-appearance 选择标签没有下拉箭头

【问题标题】：PhoneGap build webkit-appearance no drop down arrow for select tagPhoneGap 构建 webkit-appearance 选择标签没有下拉箭头
【发布时间】：2013-01-22 04:34:03
【问题描述】：

我正在使用 PhoneGap 构建，我的选择标签在手机上没有下拉箭头。我尝试应用 -webkit-appearance: menulist; 但这没有帮助，我尝试了其他选择但仍然只显示没有下拉箭头的选项。

这是 PhoneGap 的问题，因为相同的代码在我的 Android 手机的本机浏览器上显示了一个下拉箭头。

只有在我使用 PhoneGap 构建后，箭头才会消失。有什么解决办法吗？

【问题讨论】：

使用 phonegap-start 应用程序并添加 <select> 标签我仍然能够查看下拉箭头以及本机选择菜单（使用 phonegap 构建）。我无法重现该问题。
我使用了 phonegap build 2.2 和 android 4.2.1。选择框就好像它有 -webkit-appearance: none;已应用，但我从不应用它，我无法覆盖它

标签： cordova select drop-down-menu phonegap

【解决方案1】：

Android 浏览器对<select>s 的渲染存在错误，如果应用了背景或边框，则会移除正常样式。

由于<select>s 看起来不像<select>s 是一个相当大的可用性问题，因此最好不要仅为此浏览器设置样式。

不幸的是，没有纯 CSS 方式来选择/排除 Android 浏览器，所以我建议你使用 Layout Engine (https://github.com/stowball/Layout-Engine)，它会在 <html> 标签中添加一个 .browser-android 类。

然后，您可以为所有<select>s 设置样式，除了在 Android 浏览器上，如下所示：

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

【讨论】：