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

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