Здрасте всем!
Сегодня я бы хотел пролить свет на небольшой хак для очень часто используемого и не часто стилизуемого верстальщиками элемента инпутов - placeholder
Проблема: очень часто дизайнеры в своих макетах рисуют разные стилизованные подсказки внутри инпутов, и их начертание очень часто должно отличаться от введённого внутрь инпут текста. Многие начинающие верстальщики не знают всех тонкостей вёрстки и считают стилизацию этого элемента невозможным. Это не совсем так.
Вот так стандартно выглядит placeholder во всех браузерах, поддерживающих этот параметр:
Решение: Стилизовать плейсхолдер можно только для браузеров на основе webkit (Chrome, последние версии Opera, Safari), Mozilla и IE Edge. В других браузерах плейсхолдер будет отображаться стандартным образом. для стилизации плейсхолдера нам понадобятся нестандартные правила:
- Для Webkit и EDGE: input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {font-style:italic;color:#c00;}
- Для Firefox: input:-moz-placeholder,textarea::-moz-input-placeholder {font-style:italic;color:#c00;}
Обратите внимание (!!!), что не смотря на то, что и в первой строке и во второй свойства у тегов прописаны одинаковые (font-style и color) - их все равно нужно писать отдельно. Иначе стили работать не будут.
Вот как будет выглядеть Placeholder в нашем примере:
Для наглядности я сделал на картинке два варианта инпута: с плейсхолдером и с введенным в инпут текстом.
Проблема 2: Есть еще один баг у плейсхолдера, которые многие верстальщики и программисты решают при помощи JS: при фокусе на инпут с плейсхолдером в хроме он не пропадает, а пропадает только после того как мы начинаем вводить что-либо в него.
Решение: победить эту проблему можно так же на чистом CSS. Добавьте в свой файл со стилями строку:
- input:focus::-webkit-input-placeholder,textarea:focus::-webkit-input-placeholder { color:transparent; }
Она поможет Вам скрывать плейсхолдер в Хроме сразу при фокусе на инпут.
Надеюсь, теперь стилизация этого элемента не вызовет у вас трудностей и Вы сможете положить ещё один хак себе в копилку знаний.
