Эта статья является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
Вы можете просмотреть полную транскрипцию и скринкаст для соответствующего видео «Псевдоэлементы» здесь .
Добро пожаловать в нашу серию AtoZ CSS! В этой серии я буду изучать различные значения CSS (и свойства), каждое из которых начинается с другой буквы алфавита. Мы знаем, что иногда скринкастов недостаточно, поэтому в этой статье мы добавили новый быстрый совет по стилю заполнения текста.
P для текста заполнителя
Псевдоэлементы :before и :after отлично подходят для создания сложных конструктивных элементов, не загромождая разметку несемантическими элементами. Другие псевдоэлементы, такие как :first-line и :first-letter дают нам доступ к стилю элементов, которые не найдены в HTML-документе.
Мы рассмотрели многие из них в экранной трансляции «Псевдоэлементы», но один псевдоэлемент, на который мы не смотрели, был для стилизации текста заполнителя. Давайте это исправим.
Выбор входных заполнителей
Во-первых, давайте представим следующий HTML:
<input class="name-field" type="text" placeholder="Enter your name">
Мы могли бы установить color текста ввода следующим образом:
.name-field { color: red; }
Мы также можем выбрать и стилизовать входные данные из атрибута placeholder:
input[placeholder="Enter your name"] { color: red; }
Но это все же стилизует текст любого пользовательского ввода, введенного в поле, а не стилизует внешний вид самого текста-заполнителя. Для этого нам понадобится серия селекторов с префиксом вендора для псевдоэлемента заполнителя.
::-webkit-input-placeholder { color: red; } :-moz-placeholder {/*Firefox 18-*/ color: red; } ::-moz-placeholder {/*Firefox 19+*/ color: red; } :-ms-input-placeholder { color: red; }
Это может выглядеть как дублирование, но, к сожалению, для этого нет СУХОГО (не повторяющегося) способа.
Следующее не будет работать:
::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder { color: red; }
Это связано с тем, что любой браузер должен иметь возможность «понимать» каждый из селекторов в серии, разделенных запятыми, для применения стилей в фигурных скобках.
Используйте Sass для стилизации заполнителей
Одним из решений этого повторяющегося CSS является использование миксина Sass. Это тот, который я использую в 99% моих проектов:
@mixin input-placeholder { ::-webkit-input-placeholder { @content; } :-moz-placeholder {/* Firefox 18- */ @content; } ::-moz-placeholder {/* Firefox 19+ */ @content; } :-ms-input-placeholder { @content; } } /* usage */ @include input-placeholder { color: red; }
Это позволяет мне устанавливать стили для заполнителей во всех браузерах с помощью одного Sass @include которое помогает сделать код короче и @include обслуживании.
Будьте осторожны со спецификой при оформлении заполнителей
В браузере IE установка стилей на входе может переопределить стили, установленные для текста заполнителя.
:-ms-input-placeholder { color: red; } input[type="text"] { color: blue; /* placeholder text will be blue in IE */ }
Убедитесь, что стили заполнителей IE имеют более высокую специфичность, чтобы они выглядели так, как ожидается Это может быть даже в случае использования !important но всегда будьте осторожны при использовании этого мощного инструмента.
Знать о opacity заполнителей
В Firefox opacity текст по умолчанию имеет opacity около 0.5 поэтому установка color: red для местозаполнителя приведет к приглушенному color unless you also set opacity: 1 .
Даже если вы используете Normalize.css, это не для вас. Если полностью непрозрачные заполнители являются ключевыми для вашего проекта, имейте это в виду!