Question

我目前正在使用Angular（1.6版）制作一个Web应用程序，并使用Cordova将其打包到android，IOS和Windows 10应用程序中进行移动项目。但是，我注意到某些CSS样式在打包的应用程序上无法按预期工作。一个很好的例子是选择列表中的选项。

HTML列表

<select ng-show="!disabled" ng-model="entityId"
            ng-options="e.currency.currencyKey as e.currency.description disable when !e.currency.allowToBeUsedByCompany for e in entityList"
            ng-required="required" ng-change="onChange()" />

CSS

select option:disabled {
color: rgba(255, 102, 102, 0.5);
font-style: italic;
}

以上是我们如何使用连接的CSS样式构造列表的示例集。我们想在我们的应用程序中显示“货币”选项列表，并清楚显示已禁用的选项。

correct showing of currency list

上方的图片链接显示了我们想要显示的内容的正确版本。在我们的浏览器应用程序中就是这样。

但是，当将此应用程序构建为android应用程序并安装时，没有样式在其上起作用。您将获得以下默认列表

android tablet list incorrect

我试图通过样式查找针对特定平台的CSS技巧，以查看它是否可以执行任何操作，但是到目前为止，它似乎还没有实现。奇怪的是，我们使用的大多数其他CSS东西，例如屏幕颜色，弹出样式等，在所有其他平台上似乎都可以正常工作，但是列表选项由于某些原因而没有。

我调查过/尝试过的事情示例

//target cordova platform, platform-android also tried
platform-cordova . select option:disabled {
color: rgba(255, 102, 102, 0.5);
font-style: italic;
}

任何人有任何想法或建议，为什么在Cordova构建之后，这个特定元素不希望听样式？

浏览器和平板电脑的样式差异

0 个答案: