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

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

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

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

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

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

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

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

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

<input class="name-field" type="text" placeholder="Enter your name">

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

.name-field {
  color: red;
}

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

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;
  }
}

/* применение */

@include input-placeholder {
  color: red;
}

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

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

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

:-ms-input-placeholder {
  color: red;
}
input[type="text"] { 
  color: blue; /* В IE цвет плейсхолдера будет синий */
}

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

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

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

Автор: Guy Routledge

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree