Question

在Internet Explorer 10（移动版）中，一个选择框（）一旦聚焦就会突出显示为蓝色（这是手机整个现代UI界面的蓝色）。 select标签的样式：

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; }

您可以在this page上了解详情。

Answer 3

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

如果有人回来讨论这个问题，我想把它添加为答案。

:focus{outline: none;}

windows phone 8突出显示输入字段中的颜色

3 个答案: