2013-04-19 1 views
0

в Internet Explorer 10 (мобильная версия), selectbox() получает выделение синего цвета, как только он фокусируется (это синий цвет всей поверхности современного интерфейса пользователя) , стили для выбора тега:Windows Phone 8 выделяет цвета в полях ввода

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-пользовательский выберите: нет» бы это исправить, но техника его подводит .. Кто-нибудь испытать подобное?

+1

Вы хотите сказать, что весь элемент подсвечивается или просто фокусируется вокруг элемента? Если первое, должно работать. Если последнее, возможно, удалить его с помощью select: focus {outline: none; }, но у меня нет устройства для тестирования прямо сейчас. –

ответ

1

Я столкнулся с аналогичной проблемой на WP7 WP8, решение состоит в том, чтобы переместить фокус из окна выбора в поддельный вход в событие click.

JQuery:

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

CSS:

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

Примечание: не забудьте добавить этот код только для мобильных устройств, на настольных браузерах он будет работать, как ожидалось.

+0

Я решил это с помощью .blur(). Странно. – dan

+0

Я просто хочу добавить, что он больше не работает на Samsung Galaxy S3. После клика по тегу select .blur() немедленно закрывает собственное меню выпадающего меню Android. – dan

0

Это интересно, но поскольку я добавляю эту строку в свою таблицу стилей, она сохраняет выделение синим цветом, но не остается таким, как только вы выберете что-то из selectbox.

Думал, что я добавляю его в качестве ответа, если кто-то вернется с проблемой.

:focus{outline: none;} 
1

IE имеет свой собственный псевдоэлемент CSS для решения этой проблемы.

CSS:

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

Вы можете прочитать об этом на this page.