Стилизуем placeholder при помощи CSS. Синтаксис, трюки, поддерживаемые стили в html5

placeholder-css

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

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

html

<input type="text" placeholder="Оставьте сообщение здесь">

input placeholder demo

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

css

::-webkit-input-placeholder {color:#c0392b;}
::-moz-placeholder          {color:#c0392b;}/* Firefox 19+ */
:-moz-placeholder           {color:#c0392b;}/* Firefox 18- */
:-ms-input-placeholder      {color:#c0392b;}

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

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

Смотрим, что получилось:

input placeholder demo

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

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

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

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

css

input[placeholder]          {text-overflow:ellipsis;}
input::-moz-placeholder     {text-overflow:ellipsis;} 
input:-moz-placeholder      {text-overflow:ellipsis;} 
input:-ms-input-placeholder {text-overflow:ellipsis;}    

input placeholder demo

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

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

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

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

css

:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}

input placeholder demo

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

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

input placeholder demo

Вот сss:

css

/* плавное изменение прозрачности  placeholder-а при фокусе */
.input1::-webkit-input-placeholder       {opacity: 1; transition: opacity 0.3s ease;}
.input1::-moz-placeholder                {opacity: 1; transition: opacity 0.3s ease;}
.input1:-moz-placeholder                 {opacity: 1; transition: opacity 0.3s ease;}
.input1:-ms-input-placeholder            {opacity: 1; transition: opacity 0.3s ease;}
.input1:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
.input1:focus::-moz-placeholder          {opacity: 0; transition: opacity 0.3s ease;}
.input1:focus:-moz-placeholder           {opacity: 0; transition: opacity 0.3s ease;}
.input1:focus:-ms-input-placeholder      {opacity: 0; transition: opacity 0.3s ease;}

/* сдвиг placeholder-а вправо при фокусе*/

.input2::-webkit-input-placeholder       {text-indent: 0px;   transition: text-indent 0.3s ease;}
.input2::-moz-placeholder                {text-indent: 0px;   transition: text-indent 0.3s ease;}
.input2:-moz-placeholder                 {text-indent: 0px;   transition: text-indent 0.3s ease;}
.input2:-ms-input-placeholder            {text-indent: 0px;   transition: text-indent 0.3s ease;}
.input2:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
.input2:focus::-moz-placeholder          {text-indent: 500px; transition: text-indent 0.3s ease;}
.input2:focus:-moz-placeholder           {text-indent: 500px; transition: text-indent 0.3s ease;}
.input2:focus:-ms-input-placeholder      {text-indent: 500px; transition: text-indent 0.3s ease;}

/* сдвиг placeholder-а вниз при фокусе*/

.input3::-webkit-input-placeholder       {line-height: 20px;  transition: line-height 0.5s ease;}
.input3::-moz-placeholder                {line-height: 20px;  transition: line-height 0.5s ease;}
.input3:-moz-placeholder                 {line-height: 20px;  transition: line-height 0.5s ease;}
.input3:-ms-input-placeholder            {line-height: 20px;  transition: line-height 0.5s ease;}
.input3:focus::-webkit-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
.input3:focus::-moz-placeholder          {line-height: 100px; transition: line-height 0.5s ease;}
.input3:focus:-moz-placeholder           {line-height: 100px; transition: line-height 0.5s ease;}
.input3:focus:-ms-input-placeholder      {line-height: 100px; transition: line-height 0.5s ease;}

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

29 comments on “Стилизуем placeholder при помощи CSS. Синтаксис, трюки, поддерживаемые стили в html5
  1. slaffko пишет:

    Жаль что Опера до сих пор не стилизует плэйсхолдер

  2. Сергей пишет:

    Спасибо, статейка помогла…главная часть статьи это ” :focus::-webkit-input-placeholder {color:transparent} ”

  3. Константин пишет:

    Прошу заметить, что через запятую прописанные правила работать не будут.

  4. Мария пишет:

    Спасибо, добрый человек!))) Очень помогло!

  5. Евгений пишет:

    Спасибо, пригодилось )

  6. Рикки пишет:

    Отличная статья, спасибо! Кстати я тут заметил что плавность не работает в других браузерах. Только в хроме. Ну да ладно. Главное что цвет и исчезание при фокусе работает везде.

  7. Павел пишет:

    Очень помогла статья (исчезание при фокусе). Спасибо.

  8. Виталий пишет:

    В мозиле не работает “Скрываем placeholder красиво”

  9. Abbay пишет:

    А как вставить красную звездочку, после надписи в placeholder пробовал добавлять вот так :focus::-webkit-input-placeholder:after {color: red; content:*;} но не работает

  10. Данил пишет:

    Благодарю, очень занимательная вещь)

  11. Алексей пишет:

    почему в валидаторе выдает предупреждение на этот код

    :focus::-webkit-input-placeholder{color:transparent}
    :focus::-moz-placeholder{color:transparent}
    :focus:-ms-input-placeholder{color:transparent}

  12. Aleksov пишет:

    В Firefox не работают слайды…

  13. Константин пишет:

    спасибо братан ты просто супер

  14. Алексей пишет:

    Забыли про ::-ms-input-placeholder для Edge 12+. http://caniuse.com/#search=%3A%3Aplaceholder

  15. Андрей пишет:

    Спасибо. Отличные материалы.
    Поправка. Свойство transition достаточно объявить в основном блоке. В hover оно уже лишнее. Понимаю, что Вы точно в курсе Комментарий, скорее, для тех, кто осваивает премудрости CSS.

  16. Андрей пишет:

    “Сдвиг placeholder-а вниз при фокусе” чёто не пашет в хроме 51 :(

  17. Алексей пишет:

    Столкнулся с проблемой что у меня 2 формы input text и каждая из них имеет разный background-color, соответственно мне необходимо сделать два разных цвета placeholder’а. А вот как это сделать – хз :)
    Быть может вы знаете решение этой проблемы?

  18. айнур пишет:

    спасибо!!!

  19. np пишет:

    Огромное спасибо за статью!

  20. ArtLenk пишет:

    Сдвиг placeholder-а вниз при фокусе не работает. Спасибо за статью в избранном, пользуюсь при верстке.

  21. inverser пишет:

    Для всех input+textarea плавное смещение placeholder вправо + прозрачность 0 при фокусе:
    input::-webkit-input-placeholder{text-indent:0px;transition:all 0.7s ease;}
    input::-moz-placeholder{text-indent:0px;transition:all 0.7s ease;}
    input:-moz-placeholder{text-indent:0px;transition:all 0.7s ease;}
    input:-ms-input-placeholder{text-indent:0px;transition:all 0.7s ease;}
    input:focus::-webkit-input-placeholder{text-indent:50px; transition:all 0.7s ease;opacity:0;}
    input:focus::-moz-placeholder{text-indent:50px; transition:all 0.7s ease;opacity:0;}
    input:focus:-moz-placeholder {text-indent:50px; transition:all 0.7s ease;opacity:0;}
    input:focus:-ms-input-placeholder{text-indent:50px; transition:all 0.7s ease;opacity:0;}

    textarea::-webkit-input-placeholder{text-indent:0px;transition:all 0.7s ease;}
    textarea::-moz-placeholder{text-indent:0px;transition:all 0.7s ease;}
    textarea:-moz-placeholder{text-indent:0px;transition:all 0.7s ease;}
    textarea:-ms-input-placeholder{text-indent:0px;transition:all 0.7s ease;}
    textarea:focus::-webkit-input-placeholder{text-indent:50px; transition:all 0.7s ease;opacity:0;}
    textarea:focus::-moz-placeholder{text-indent:50px; transition:all 0.7s ease;opacity:0;}
    textarea:focus:-moz-placeholder {text-indent:50px; transition:all 0.7s ease;opacity:0;}
    textarea:focus:-ms-input-placeholder{text-indent:50px; transition:all 0.7s ease;opacity:0;}

  22. Александр пишет:

    Пожалуй, самая понятная и полезная статья на эту тему. Спасибо!

Оставить комментарий

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

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

*

* Copy This Password *

* Type Or Paste Password Here *

Проект создан в GanttPRO
Спасибо за лайк в FACEBOOK
Подписывайтесь на новости вконтакте
Последние статьи от html5.by