Заполнитель CSS не применяется в IE 11

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

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

демо

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

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

мой css/стиль по умолчанию:

#search
{
    color:blue;
}

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

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

30
internet-explorer internet-explorer-11 placeholder pseudo-class

4 ответов

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

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

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

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

15

В общем, при укладке заполнители

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

/* - Chrome ≤56,
   - Safari 5-10.0
   - iOS Safari 4.2-10.2
   - Opera 15-43
   - Opera Mobile 12-12.1
   - Android Browser 2.1-4.4.4
   - Samsung Internet ≤6.2
   - 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's Draft
   - Browsers not mentioned in vendor prefixes
   - Browser of newer versions than mentioned in vendor prefixes */
::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 rulesets omitted for brevity */

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

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

например:

#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/

16

Если кто-то пришел сюда, потому что он не может изменить font-size в настоящее время font-size для заполнителя не поддерживается в IE и Edje. не похоже, что они собираются исправить это в ближайшее время. выпуск #11342294

1