Webstacker

Твой онлайн-журнал с мира Web и Front End: Новости, статьи и гайды на русском

Стилизация placeholder с помощью CSS стилей

  • Вещает
  • Опубликовано:
  • Изменено:
Placeholder CSS

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

Атрибут 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-разработки. Понравилась статья? Расскажи об этом друзьям!