3

我使用 PhoneGap 为 Android 开发了一个移动应用程序。我还为浏览器发布了它。

在我的手机上，当我在 Chrome 中查看应用程序时，我得到以下选择菜单样式：

在此处输入图像描述

但是，当我打开使用 PhoneGap 打包的应用程序时，我得到了这个：

在此处输入图像描述

对于完全相同的代码。

如何在 Android 设备上设置选择菜单的样式，使其看起来像在 Chrome 中一样？

我尝试使用--webkit-appearance，但我不确定如何准确使用它......

4

4 回答 4

5

我在 Android 的 Phonegap 应用程序中的对话框也有类似的问题。cordova android 应用程序中的默认主题是：

android:theme="@android:style/Theme.Black.NoTitleBar"

AndroidManifest.xml在您的主要活动中查看您的,。如果是这种情况，请将其更改为

android:theme="@android:style/Theme.Holo.Light.NoActionBar"

Chrome 似乎根据您的屏幕截图（或类似内容）使用此主题。

于 2013-08-11T10:27:54.600 回答
3

你不能但更重要的是你不应该！

每个移动平台都有自己的设计原则，旨在牢记最佳用户的兴趣。对于 iOS，它甚至可能意味着您的应用程序将被拒绝。

即使是不同的 android 版本也往往具有不同的 ui 原则，例如在您的图片中，第一个显示来自原始 android 的选择菜单，最后一个显示来自 samsungs android 的选择菜单。

因此，您不能使用 css 设置选择菜单的样式。但是，您可以编写一个 phonegap 插件来为您提供自定义选择菜单。

另一种选择是构建一个没有 html 选择但只有 javascript 的选择菜单。但我不建议这样做。

于 2013-08-11T09:58:03.300 回答
1

没有办法只使用 css 来设置样式。这不是一个 html 组件，它不是 DOM 的一部分。您看到的两个选择器都是通过本机方法添加到浏览器顶部的。

本质上，如果要更改选择的默认行为，则必须构建自己的选择对话框并在用户单击选择时触发它。

检查这个类似的问题。

于 2013-08-12T09:56:56.217 回答
0

每个浏览器都以特定的方式显示元素。您应该使用 -webkit-appearence 尝试将选择重置为其默认外观：

select {
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
}
于 2013-08-10T08:13:04.093 回答