windows phone 设备上 phonegap/cordova 上的 select 标签出现问题

Question

我正在 phonegap/cordova 上开发移动混合应用程序并遇到一个我无法在 windows phone.

上解决的问题

所以我正在创建一个 select 标签，如您所见

<select>
        <option>item 1</option>
        <option>item 2</option>
        <option>item 3</option> 
</select>

我正在使用一些来自名为 Chocolate-Chip UI

的框架的 css

select {
background-color: transparent;
border: solid 2px #000000;
color: #000000;
height: 30px;
padding-left: 5px;}

给我预期的结果。你可以看到下面的结果

当我 select 一个项目时，问题似乎出现了，因为我的背景颜色是白色（我想要那样），我的字体颜色也变成白色，这导致全白 select.您可以在下面看到结果。

当我按下 select 标签时，它又恢复正常了。

所以我的问题是，我可以通过 css 控制项目 select 上的字体颜色吗？我知道我可以操纵 select:checked 或 select:focus 颜色的背景，但字体的颜色似乎不起作用

您有什么建议可以帮助吗？

Answer 1

问题是在移动设备上，即使做出选择后，输入仍会保持焦点 - 第二张图片中的蓝色边框表明了这一点。要设置聚焦状态的样式，请使用以下选择器：

select:focus {
    color: black;
    background-color: white;
}

这将是完成您想要完成的任务的正式方式。如果这不起作用，则可能是浏览器特定问题，将更难解决。

Answer 2

我已经成功解决了我的问题。看来IE11对focus事件有一些特殊的指令。

所以我的代码是这样的

/*The event on select*/
select:focus::-ms-value{
background:#FFFFFF;
color:#666666;}

这应该可以解决问题

Issue with select tag on phonegap/cordova on windows phone device