Чекбокс IE9 отображает странность в фокусе

Question

Проверьте скриншот. Вы заметите, что флажок, который имеет фокус, фактически визуализируется иначе, чем другие флажки. Что заставило бы это выглядеть таким образом в IE9?

У меня есть следующий фрагмент CSS, и я заметил только, что, если я удаляю ВСЕ из следующего CSS, эта проблема больше не возникает. Но если я просто удалю одно или два из этих правил, это все равно произойдет. Я сбит с толку.

textarea:active,
textarea:focus,
textarea:active:hover,
textarea:focus:hover,
select:active,
select:focus,
select:active:hover,
select:focus:hover,
input:active,
input:focus,
input:active:hover,
input:focus:hover{
    background-color:#f9f9f5;
    border-color:#658cae;
    -webkit-box-shadow:inset 0 1px 2px #b8b7b3, 0 0 8px #7899b5;
    -moz-box-shadow:inset 0 1px 2px #b8b7b3, 0 0 8px #7899b5;
    box-shadow:inset 0 1px 2px #b8b7b3, 0 0 8px #7899b5;

    z-index:1;/* for Opera */
}
input[type="file"]:focus,
input[type="file"]:active,
input[type="radio"]:focus,
input[type="radio"]:active,
input[type="checkbox"]:focus,
input[type="checkbox"]:active {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
input[type="file"]:focus,
input[type="file"]:active,
input[type="file"][disabled],
input[type="radio"]:focus,
input[type="radio"]:active,
input[type="radio"][disabled],
input[type="checkbox"]:focus,
input[type="checkbox"]:active,
input[type="checkbox"][disabled]{
    background-color:transparent;
}

Вот живая демоверсия: http://jsfiddle.net/QRzRw/1/

Answer 1

Internet Explorer по умолчанию использует элементы управления Windows для HTML-форм. Это стандартные стили, точно такие же, как в любом приложении Windows ... пока вы не попробуете применить к ним стили вручную.

Это можно продемонстрировать с помощью обычного ввода текста. Если вы попытаетесь установить свойство background-color, общий стиль элемента ввода изменится вместе с ним, поскольку Internet Explorer переключается со стандартного элемента управления формы Windows на пользовательский элемент управления формы. Для вашего удобства я настроил эту демонстрацию здесь .

Другие версии Internet Explorer ведут себя так же. Возможным обходным путем может быть нацеливание CSS только на браузеры, отличные от IE, используя метод, подобный условным CSS-классам Пола Айриша .

Answer 2

Это злая часть:

input:focus,
input:active:hover,
input:focus:hover{
  background-color:#f9f9f5;
  border-color:#658cae;
}

Кажется, что после того, как вы сделали этот параметр, его нельзя отменить, назначив transparent или inherit.

Похоже, вы должны добавить эти стили для всех тегов input[type=...], кроме флажка типа.

Answer 3

Друг помог мне с этим, и он понял, что установка границы или цвета фона на флажок заставит его отображаться так по какой-то странной причине.

NGLN правильно, и я примуего ответ.Я должен был изменить свой CSS следующим образом, чтобы это работало:

textarea,
select,
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"]{
    font-family:'ColaborateRegular';
    background-color:#efefeb;
    border:1px solid;
    border-color:#89969f #89969f #cbcbc8 #89969f;
    outline: 0;
    padding:3px;
    width: 100%;
    margin-bottom:10px;

    -webkit-box-shadow:inset 0 1px 2px #b8b7b3;
    -moz-box-shadow:inset 0 1px 2px #b8b7b3;
    box-shadow:inset 0 1px 2px #b8b7b3;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;

    -webkit-appearance: none;

    -webkit-transition:background-color 0.4s, border-color 0.4s;
    -moz-transition:background-color 0.4s, border-color 0.4s;
    -ms-transition:background-color 0.4s, border-color 0.4s;
    -o-transition:background-color 0.4s, border-color 0.4s;
    transition:background-color 0.4s, border-color 0.4s;
}
input[type="radio"],
input[type="checkbox"]{
    margin:0 2px 0 0;
}
textarea:hover,
select:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="text"]:hover{
    -webkit-box-shadow:inset 0 1px 2px #b8b7b3, 0 0 5px #7899b5;
    -moz-box-shadow:inset 0 1px 2px #b8b7b3, 0 0 5px #7899b5;
    box-shadow:inset 0 1px 2px #b8b7b3, 0 0 5px #7899b5;
}
textarea:active,
textarea:focus,
textarea:active:hover,
textarea:focus:hover,
select:active,
select:focus,
select:active:hover,
select:focus:hover,
input[type="email"]:active,
input[type="email"]:focus,
input[type="email"]:active:hover,
input[type="email"]:focus:hover,
input[type="number"]:active,
input[type="number"]:focus,
input[type="number"]:active:hover,
input[type="number"]:focus:hover,
input[type="password"]:active,
input[type="password"]:focus,
input[type="password"]:active:hover,
input[type="password"]:focus:hover,
input[type="search"]:active,
input[type="search"]:focus,
input[type="search"]:active:hover,
input[type="search"]:focus:hover,
input[type="tel"]:active,
input[type="tel"]:focus,
input[type="tel"]:active:hover,
input[type="tel"]:focus:hover,
input[type="text"]:active,
input[type="text"]:focus,
input[type="text"]:active:hover,
input[type="text"]:focus:hover{
    background-color:#f9f9f5;
    border-color:#658cae;
    -webkit-box-shadow:inset 0 1px 2px #b8b7b3, 0 0 8px #7899b5;
    -moz-box-shadow:inset 0 1px 2px #b8b7b3, 0 0 8px #7899b5;
    box-shadow:inset 0 1px 2px #b8b7b3, 0 0 8px #7899b5;

    z-index:1;/* for Opera */
}

Answer 4

Я знаю, что на этот вопрос уже дан ответ, но я считаю, что у меня есть лучшее решение.Кажется, я получаю то же самое в IE 8 + 9

<!--[if gte IE 8]>
<style type="text/css">
input[type="checkbox"] {
     outline:0;border:0;
}
</style>
<![endif]-->