Как изменить стиль placeholder css

Стилизуем placeholder при помощи CSS

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

Итак, начнем с примера для тех, кто не знает, что такое placeholder.

Стиль placeholder-a можно изменить с помощью такого набора css правил:

Выглядит страшновато, не правда ли? Дело в том, что этого до сих пор нет в стандартах. Каждый браузер по-своему реализовал поддержку стилизации placeholder-а.

В IE и старых firefox (до 18-го) placeholder считается псевдоклассом, а в новых firefox, webkit и blink – псевдоэлементом.

Вот что получилось

Нужно сказать, что поддерживаются не все возможные css свойства. Большинство современных браузеров позволяют изменить:

  • font (и сопутствующие свойства)
  • background (и сопутствующие свойства)
  • color
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • text-indent
  • text-overflow
  • opacity

А если placeholder не вмещается?

Иногда поля для ввода текста сокращаются по ширине из-за особенностей лейаута, в частности на мобильных девайсах. В этом случае длинный текст placeholder-а будет некрасиво обрезан. Чтобы предотвратить это, вы можете использовать свойство ellipsis text-overflow: ellipsis Такой синтаксис будет работать во всех новых браузерах.

Обратите внимание на троеточие в конце.

Как скрыть placeholder при фокусе?

Скрывание placeholder-а происходит по-разному.

  1. в некоторых браузерах при получении фокуса инпутом
  2. в других браузерах при наличии хотя бы одного введенного символа

Мне больше нравится первый вариант. Для того, чтобы задать такое поведение во всех браузерах, поддерживающих placeholder, определим следующие css правила:

Скрываем placeholder красиво

Можно также добавить transition для появления и скрытия placeholder-a.

Надеюсь, вам это пригодится. Пишите замечания и предложения в комментариях.

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

Placeholder CSS

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

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

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

Какие свойства поддерживает

Рано радоваться! Хоть и плейсхолдер можно стилизировать, но список его свойств сильно ограничен, он поддерживает:

  • font (и сопутствующие свойства)
  • background (и сопутствующие свойства)
  • color
  • line-height
  • letter-spacing
  • text-decoration
  • text-transform
  • text-overflow
  • opacity
  • word-spacing
  • vertical-align
  • text-indent

Интересные возможности стилей плейсхолдера

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

Или обрезать текст и поставить три точки (…) с помощью text-overflow:ellipsis;

Заключение

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

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

Change a HTML5 input's placeholder color with CSS

Chrome supports the placeholder attribute on input[type=text] elements (others probably do too).

But the following CSS doesn’t do anything to the placeholder’s value:

But Value will still remain grey instead of red .

Is there a way to change the color of the placeholder text?

42 Answers 42

Implementation

There are three different implementations: pseudo-elements, pseudo-classes, and nothing.

  • WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element: ::-webkit-input-placeholder . [Ref]
  • Mozilla Firefox 4 to 18 is using a pseudo-class: :-moz-placeholder (one colon). [Ref]
  • Mozilla Firefox 19+ is using a pseudo-element: ::-moz-placeholder , but the old selector will still work for a while. [Ref]
  • Internet Explorer 10 and 11 are using a pseudo-class: :-ms-input-placeholder . [Ref]
  • April 2017: Most modern browsers support the simple pseudo-element ::placeholder [Ref]

Internet Explorer 9 and lower does not support the placeholder attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.

The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the pseudo-element.

CSS selectors

User agents are required to ignore a rule with an unknown selector. See Selectors Level 3:

a group of selectors containing an invalid selector is invalid.

So we need separate rules for each browser. Otherwise the whole group would be ignored by all browsers.

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

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