Кратко о главном

Атрибут placeholder применяется для отображения подсказок и другой информации внутри пустых элементов input и textarea. В этой статье мы рассмотрим возможности placeholder и стили, которые позволят сделать его более красивым и уникальным.

Для тех, кто не знает что такое плейсхолдер и как он выглядит — все предельно просто: все ограничивается добавлением одного атрибута для текстового поля. Например:

<input type="email" placeholder="Enter your e-mail..." />

Со стилями мы используем общий и вендорные префиксы каждого из популярных браузеров:

::placeholder { color: #ddd; }
::-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:placeholder {color: transparent}
: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;

Заключение

На сегодняшний день поддержка браузерами равна 91-94%, что довольно неплохо. Тем более, отсутствие поддержки всего не отобразит кастомные стили и ничего не сломает. Так что – юзаем!

Также подписывайтесь на наш офигенный Телеграм-канал 🤘: постим крутые статьи, авторские мнения, новости и шутки из мира Web-разработки. Понравилась статья? Расскажи об этом друзьям!