Обычно атрибут placeholder в input и textarea используется для призыва к действию внутри этих элементов. В этой заметке опишу несколько вариантов стилизации текста placeholder-ов, а также варианты их анимации
Итак, цвет текста нашего placeholder-а можно изменить использовав, например следующий набор css-правил:
::-webkit-input-placeholder {color:#c0392b;}
::-moz-placeholder {color:#c0392b;}/* Firefox 19+ */
:-moz-placeholder {color:#c0392b;}/* Firefox 18- */
:-ms-input-placeholder {color:#c0392b;}
Объемность кода для стилизации такого простого свойства обусловлена отсутсивтемотсутствием общего стандарта, в связи с чем каждый браузер по-своему реализовал поддержку стилизации placeholder-а.
Кроме того, поддерживаются не все css свойства. Вот перечень точно поддержываемых свойств:
font (и связанные)
background (и связанные)
color
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
text-indent
text-overflow
opacity
Также бывает так, что текст плейсхолдера «выходит» за пределы ширины элемента input или textarea (частый случай для мобильных устройств). При этом он автоматически некрасиво обрезается.
Исправить эту неприятность нам поможет такое css-свойство, как text-overflow: ellipsis, которое добавит эстетическое троееточие к обрезанному участку placeholder-a. В стилях прописываем вот так:
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-а при фокусе */
.input::-webkit-input-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.input::-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.input:-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.input:-ms-input-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.input:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
.input:focus::-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;}
.input:focus:-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;}
.input:focus:-ms-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
/* сдвиг placeholder-а вправо при фокусе*/
.input::-webkit-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
.input::-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
.input:-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
.input:-ms-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
.input:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
.input:focus::-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
.input:focus:-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
.input:focus:-ms-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
/* сдвиг placeholder-а вниз при фокусе*/
.input::-webkit-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;}
.input::-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;}
.input:-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;}
.input:-ms-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;}
.input:focus::-webkit-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
.input:focus::-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
.input:focus:-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
.input:focus:-ms-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
На этом и закончим.