CSS-код заполнителя не применяется в IE 11

Я получаю некоторую проблему при применении placeholder css.

Я пытаюсь применить css (т.е. color:#898F9C;) на заполнителе ввода-вывода, используя селектор псевдокласса :-ms-input-placeholder, но он не работает в IE.

Демо-версия

После некоторых попыток и попыток я получаю решение своей проблемы, но это потрясающе.

Если я удалил цвет css/style по умолчанию в поле ввода, то css-заполнитель корректно работает в IE (это потрясающее поведение Internet Explorer).

Мой по умолчанию css/style:

#search
{
    color:blue;
}

Рабочая скрипта без поля ввода по умолчанию css

Мой вопрос: почему он не работает с CSS по умолчанию в IE?

Ответ 1

В дополнение к тому, что ответил Радж, при использовании префиксов поставщиков селекторам необходимо разделить их собственные наборы правил для каждого префикса.

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

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

Вместо этого вы должны создать новый набор правил для каждого префикса для псевдонима класса/элемента. К сожалению, это много повторений, но это цена за использование экспериментального CSS.

Ответ 2

В общем, при компоновке стилей

При обнаружении неподдерживаемого префикса поставщика механизмы синтаксического анализа CSS будут считать недопустимым все правило, поэтому требуется отдельный набор правил для каждого префикса поставщика. Кроме того, я обнаружил, что для IE11 требуется, чтобы флаг !important переопределял стили пользовательского агента по умолчанию:

/* - Chrome ≤56,
   - Safari 5-10.0
   - iOS Safari 4.2-10.2
   - Opera 15-43
   - Opera Mobile >12
   - Android Browser 2.1-4.4.4
   - Samsung Internet
   - UC Browser for Android
   - QQ Browser */
::-webkit-input-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* Firefox 4-18 */
:-moz-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* Firefox 19-50 */
::-moz-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* - Internet Explorer 10–11
   - Internet Explorer Mobile 10-11 */
:-ms-input-placeholder {
    color: #ccc !important;
    font-weight: 400 !important;
}

/* Edge (also supports ::-webkit-input-placeholder) */
::-ms-input-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* CSS Pseudo-Elements Level 4 Editor Draft */
::placeholder {
    color: #ccc;
    font-weight: 400;
}

Кажется, что для IE11 нужен флаг !important.

Проверить поддержку браузера на CanIUse

Решение вашей конкретной проблемы

В вашем примере вам понадобятся эти наборы правил для IE11:

#search:-ms-input-placeholder {
    color: #898F9C !important; /* IE11 needs the !important flag */
}

/* (...) Other vendor prefixed rule sets omitted for brevity */

#search::placeholder {
    color: #898F9C;
}

Ответ 3

определения должны быть разделены.

например:

#search
{
    color:blue;
}

#search::-webkit-input-placeholder {
   color: red;
}

#search:-moz-placeholder {
   color: red;
}

#search::-moz-p {
   color: red;
}

#search:-ms-input-placeholder {
   color: red;
}

Смотрите здесь: http://jsfiddle.net/DLGFK/203/