Windows Phone 8 Highlight Colors in Input Box

in internet explorer 10 (mobile version), selectbox () gets highlighted in blue as soon as it focuses (this is the blue color of the entire surface of the modern user interface). 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 that "-ms-user-select: none" would fix it, but not .. Has anyone come across this?

0
source share
3 answers

I ran into a similar WP7 WP8 problem, the solution is to move the focus from the selection window to the fake entry in the click event.

JQuery

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

CSS

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

. , , .

+1

IE CSS, .

CSS

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

.

+1

, , , , - selectbox.

, , - .

:focus{outline: none;}
0

Source: https://habr.com/ru/post/1533469/


All Articles