CSS от А до Я: плейсхолдер

CSS от А до Я: плейсхолдер

От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов по стилизации плейсхолдеров.

Видеоурок и его текстовую версию по псевдоэлементам можно посмотреть по ссылке.

P значит плейсхолдер

Для создания сложных дизайнерских решений без лишнего раздувания разметки несемантическими элементами отлично подходят псевдоэлементы :before и :after. Другие псевдоэлементы типа :first-line и :first-letter позволяют стилизовать отдельные части элементов, которые не помечены в разметке документа.

В видеоуроке мы рассмотрели множество псевдоэлементов, однако мы не разобрали псевдоэлемент, позволяющий стилизовать текст в плейсхолдерах. Исправим же это упущение.

Как выбрать плейсхолдер

Представим следующий код:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Цвет вводимого текста можно сделать красным:

Также это поле можно было бы найти и стилизовать по атрибуту плейсхолдера:

Однако так мы стилизуем вводимый текст, а не текст плейсхолдера. Тут нам поможет несколько селекторов с вендорными префиксами псевдоэлемента плейсхолдер.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Чтобы применить стили внутри фигурных скобок, браузер должен «понимать» каждый селектор, разделенный запятой.

Стилизация плейсхолдера с помощью Sass

Чтобы не повторять CSS код, можно написать Sass миксин. Миксин ниже я использую в 99% своих проектов:

С его помощью я могу стилизовать плейсхолдеры во всех браузерах с помощью всего одного вызова @include, что позволяет сократить код и сделать его удобным для дальнейшего обслуживания.

Внимательно смотрите на объявления, когда стилизуете плейсхолдеры

В браузерах IE стили для самого поля формы могут переписывать стили плейсхолдера.

Задавайте для стилей плейсхолдера в IE большую специфичность, чтобы они правильно применялись. Тут даже можно прибегнуть к !important, но будьте осторожны с таким мощным инструментом.

Не забывайте про прозрачность плейсхолдеров

В Firefox плейсхолдеры имеют по умолчанию прозрачность opacity примерно в 0.5. Таким образом, если сделать текст плейсхолдера красным, то на выходе вы получите приглушенный цвет. Или же можно задать свойство opacity: 1. В этом случае не поможет даже Normalize.css. Если в вашем проекте плейсхолдеры должны быть непрозрачными, помните об этом!

Автор: Guy Routledge

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree