Кратко о главном
Атрибут placeholder применяется для отображения подсказок и другой информации внутри пустых элементов input и textarea. В этой статье мы рассмотрим возможности placeholder и стили, которые позволят сделать его более красивым и уникальным.
Для тех, кто не знает что такое плейсхолдер и как он выглядит — все предельно просто: все ограничивается добавлением одного атрибута для текстового поля. Например:
<input type="email" placeholder="Enter your e-mail..." />Со стилями же все немного сложнее – универсального тэга для кроссбраузерной поддержки нету. Поэтому мы используем вендорные префиксы каждого из популярных браузеров:
::-webkit-input-placeholder { color: #ddd; }
:-ms-input-placeholder { color: #ddd; }
::-moz-placeholder { color: #ddd; } // Firefox 19+
:-moz-placeholder { color: #ddd; } // Firefox 18-Какие свойства поддерживает
Рано радоваться! Хоть и плейсхолдер можно стилизировать, но список его свойств сильно ограничен, он поддерживает:
- font (и сопутствующие свойства)
- background (и сопутствующие свойства)
- color
- line-height
- letter-spacing
- text-decoration
- text-transform
- text-overflow
- opacity
- word-spacing
- vertical-align
- text-indent
Интересные возможности стилей плейсхолдера
Даже этот небольшой набор стилей позволяет нам сделать интересные решения для текстовых полей. Например, убрать текст при фокусе текстового окна:
:focus::-webkit-input-placeholder {color: transparent}
:focus:-ms-input-placeholder {color: transparent}
:focus::-moz-placeholder {color: transparent}
:focus:-moz-placeholder {color: transparent}Или обрезать текст и поставить три точки (…) с помощью text-overflow:ellipsis;
Заключение
На сегодняшний день поддержка браузерами равна 88-90%, что довольно неплохо. Тем более, отсутствие поддержки всего не отобразит кастомные стили и ничего не сломает. Так что – юзаем!
Также подписывайтесь на наш офигенный Телеграм-канал 🤘: постим крутые статьи, авторские мнения, новости и шутки из мира Web-разработки. Понравилась статья? Расскажи об этом друзьям!
