windows phone 8 highlight colors in input fields

问题

in internet explorer 10 (mobile version), a selectbox () gets highlighted blue as soon as it gets focused, (it´s the blue of the whole Modern UI surface of the phone). the styles for the select tag:

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;

I was hoping the "-ms-user-select: none" would fix it, but didnt.. Has anyone experience similar?

回答1:

I've encountered a similar problem on WP7 an WP8, the solution is to move focus from select box to fake input on click event.

jQuery:

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

CSS:

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

Note: do not forget to add this code only for mobile device, on desktop browsers it will work not as expected.

回答2:

IE has its own CSS pseudo-element to deal with this highlight.

CSS:

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

You may read more about this on this page.

回答3:

it´s interesting but since I add this line to my style sheet, it keeps highlighting blue, but doesn´t stay that way after you select something from the selectbox.

Thought I add it as an answer if somebody comes back with the issue.

:focus{outline: none;}

来源：https://stackoverflow.com/questions/16105084/windows-phone-8-highlight-colors-in-input-fields

标签

html

css

windows-phone-8

internet-explorer-10