Блог

Проверьте скриншот. Вы заметите, что флажок, который имеет фокус, на самом деле отображается иначе, чем другие флажки. Что могло бы заставить его выглядеть таким образом в 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

Это плохая часть:

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

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

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

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

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

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

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

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 */
}
  

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

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