Реализация
Существует три разных реализации: псевдоэлементы, псевдоклассы и ничего.
- WebKit, Blink (Safari, Google Chrome, Opera 15+) и Microsoft Гурт используют псевдо-элемент:
::-webkit-input-placeholder
. [ Ссылка ]
- Mozilla Firefox с 4 по 18 использует псевдокласс:
:-moz-placeholder
( одна двоеточие). [ Ссылка ]
- Mozilla Firefox 19+ использует псевдоэлемент:,
::-moz-placeholder
но старый селектор все еще будет работать некоторое время. [ Ссылка ]
- Internet Explorer 10 и 11 используют псевдо-класс:
:-ms-input-placeholder
. [ Ссылка ]
- Апрель 2017: большинство современных браузеров поддерживают простой псевдоэлемент
::placeholder
[ Ref ]
Internet Explorer 9 и ниже не поддерживает placeholder
атрибут вообще, в то время как Opera 12 и ниже не поддерживают CSS-селектор для заполнителей.
Дискуссия о наилучшей реализации все еще продолжается. Обратите внимание, что псевдоэлементы действуют как реальные элементы в Shadow DOM . A padding
on input
не получит тот же цвет фона, что и псевдоэлемент.
CSS селекторы
Пользовательские агенты должны игнорировать правило с неизвестным селектором. См. Уровень выбора 3 :
группа селекторов , содержащая недействительный селектор является недействительной.
Поэтому нам нужны отдельные правила для каждого браузера. В противном случае вся группа будет игнорироваться всеми браузерами.
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #909;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #909;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #909;
}
::placeholder { /* Most modern browsers support this now. */
color: #909;
}
<input placeholder="Stack Snippets are awesome!">
Примечания по использованию
- Будьте осторожны, чтобы избежать плохих контрастов. Заполнитель Firefox, кажется, по умолчанию с уменьшенной непрозрачностью, поэтому его нужно использовать
opacity: 1
здесь.
- Обратите внимание, что текст-заполнитель просто обрезается, если он не помещается, - измерьте входные элементы
em
и протестируйте их с большими настройками минимального размера шрифта. Не забывайте переводы: некоторым языкам нужно больше места для одного и того же слова.
- Браузеры с поддержкой HTML,
placeholder
но без поддержки CSS (например, Opera) также должны быть протестированы.
- Некоторые браузеры используют дополнительный CSS по умолчанию для некоторых
input
типов ( email
, search
). Это может повлиять на рендеринг неожиданным образом. Используйте свойства -webkit-appearance
и, -moz-appearance
чтобы изменить это. Пример:
[type="search"] {
-moz-appearance: textfield;
-webkit-appearance: textfield;
appearance: textfield;
}