MIGO Web-Development - разработка и cоздание сайтов в Киеве, Украине

Создание сайтов, поисковое продвижение в Google. Сопровождение, тех.поддержка


звонить: +38 (093) 636 78 08
писать: web@migo.com.ua


Стилизация и анимация placeholder в input и textarea при помощи CSS

Обычно атрибут 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;}

На этом и закончим.

проспект И.Мазепы 5 07300 Украина, Киевская обл., г. Вышгород, +38 (093) 636 78 08
Рассказать друзьям:

comments powered by Disqus