html - windows phone 8 在输入字段中突出显示颜色

Question

在 Internet Explorer 10（移动版）中，选择框 () 在获得焦点后立即突出显示为蓝色（它是手机整个现代 UI 表面的蓝色）。选择标签的样式：

border-radius: 5px 5px 5px 5px;
font-size: 14px;
height: 25px;
letter-spacing: -1px;
float: left;
font-weight: 400;
padding: 0 5px 0 5px;
-webkit-appearance: none;
-ms-user-select: none;
background-origin: content-box, content-box;
background-repeat: no-repeat, repeat;
background-size: 11px 6px, 1px 160px;
background-position: right center, 0 -1px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAMAQMAAACz9bS7AAAABlBMV…vQuZgJjsYojkBJQf75i4cGzcXt5HJQ/Djs7L5sApGeVNPJDzbGEbOb/85rAAAAAElFTkSuQmCC), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAlgCAIAAADGR8ryAAACZ0lEQ…tDzV5P+JnOAzg9qR2Xlg+a8jAvtyK/P5fSI6Sf3c3NhwADAJ0Rj8qbukvYAAAAAElFTkSuQmCC);
border: 1px solid #CCCCCC;

我希望“-ms-user-select：none”可以解决它，但没有......有没有人遇到过类似的情况？

Answer 1

我在 WP7 和 WP8 上遇到过类似的问题，解决方案是将焦点从选择框移动到点击事件上的假输入。

jQuery：

$('select').on('click', function() {
    $('input.fakeInput').focus().blur()
})

CSS：

.fakeInput {
    display: block;
    width:0;
    height:0;
    top: -999rem;
    position: absolute;
}

注意：不要忘记仅为移动设备添加此代码，在桌面浏览器上它不会按预期工作。

Answer 2

IE 有自己的 CSS 伪元素来处理这个亮点。

CSS：

select::-ms-value{ background-color: transparent; color: black; }

您可以在此页面上阅读有关此内容的更多信息。

Answer 3

这很有趣，但由于我将这一行添加到我的样式表中，它一直突出显示蓝色，但在您从选择框中选择某些内容后不会保持这种状态。

如果有人回来解决这个问题，我想我会添加它作为答案。

:focus{outline: none;}