В CSS можно стилизовать текст placeholder внутри ввода, используя комбинацию псевдоклассов и псевдоэлементов, зависящих от поставщика (чтобы получить лучший кросс-браузерный охват).
Все они имеют одни и те же базовые свойства (то есть: стилизация текста и декларации цветов).
Однако, несмотря на то, что я неизбежно хочу применять одни и те же стили независимо от поставщика браузера, представляется невозможным объединить их вместе в селектор, разделенный запятыми (как и с любым другим фрагментом CSS, где вы хотите, чтобы два селекторов, чтобы использовать одни и те же стили).
В качестве примера я склонен ориентироваться на стиль заполнителя с использованием следующих четырех селекторов:
-
input:-moz-placeholder -
input::-moz-placeholder -
input:-ms-input-placeholder -
input::-webkit-input-placeholder
(хотя :-moz-placeholder устарел в пользу ::-moz-placeholder, это произошло только с выпуском FireFox 19, так что в настоящее время оба необходимых для лучшей поддержки браузера).
Что расстраивает то, что объявление и предоставление каждого (того же) стиля приводит к большому количеству повторений в CSS.
Итак, чтобы убедиться, что текст заполнителя выровнен по правому краю и выделен курсивом, я получаю:
input:-moz-placeholder{
font-style: italic;
text-align: right;
}
input::-moz-placeholder{
font-style: italic;
text-align: right;
}
input:-ms-input-placeholder{
font-style: italic;
text-align: right;
}
input::-webkit-input-placeholder{
font-style: italic;
text-align: right;
}
То, что я действительно хочу сделать, это объединить их в одно единственное правило, разделенное запятыми:
input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-webkit-input-placeholder{
font-style: italic;
text-align: right;
}
Однако, несмотря на то, что это случалось несколько раз, это, похоже, не работает. Меня беспокоит, что есть некоторая фундаментальная часть CSS, которую я не понимаю.
Может ли кто-нибудь пролить свет на то, почему это происходит?
