Главные новости

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

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

Пример 1

<input type="text" placeholder="Искать здесь...">

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

::-webkit-input-placeholder {color:#c0392b;}
::-moz-placeholder {color:#c0392b;}
:-moz-placeholder {color:#c0392b;}
:-ms-input-placeholder {color:#c0392b;}

Выглядит страшновато, не правда ли? Дело в том, что этого до сих пор нет в стандартах. Каждый браузер по-своему реализовал поддержку стилизации 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-а будет некрасиво обрезан. Чтобы предотвратить это, вы можете использовать text-overflow: ellipsis. Такой синтаксис будет работать во всех новых браузерах.
input[placeholder] {text-overflow:ellipsis;}
input::-moz-placeholder {text-overflow:ellipsis;}
input:-moz-placeholder {text-overflow:ellipsis;}
input:-ms-input-placeholder {text-overflow:ellipsis;}

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

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

Мне больше нравится первый вариант. Для того, чтобы задать такое поведение во всех браузерах, поддерживающих placeholder, определим следующие css правила:
:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder {color: transparent}
:focus:-moz-placeholder {color: transparent}
:focus:-ms-input-placeholder {color: transparent}



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