Как стилизовать placeholder

Как стилизовать placeholder
Как стилизовать placeholder

dАтрибут placeholder выводит текст внутри input поля которая исчезает при фокусе поля. Его назначение подсказать пользователю что нужно ввести в поле, в отличие от value является то что placeholder исчезает при фокусе, а value нужно вручную убирать (можно конечно маленький скрипт написать но зачем лишние проблемы).

В этой статье мы рассмотрим как можно стилизовать placeholder используя css технологии.

Цвет

Цвет placeholder-а можно изменить используя следующие CSS правила:

.название класса input::-webkit-input-placeholder {color:#c0392b;}
.название класса input::-moz-placeholder {color:#c0392b;}/* Firefox 19+ */
.название класса input:-moz-placeholder {color:#c0392b;}/* Firefox 18- */
.название класса input:-ms-input-placeholder {color:#c0392b;}

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

Необходимо еще отметить что не все css свойства поддерживаются.

Большинство браузеров позволяют изменить лишь:

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

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

Если же 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. в других браузерах при наличии хотя бы одного введенного символа
:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}

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

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

/* плавное изменение прозрачности  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;}

Уверен Вам пригодиться это статья. Так же уверен что и вашему другу тоже пригодиться поэтому не стесняйтесь, поделитесь статьей с друзьями. Отпишитесь в комментариях если что то не понятно.

Читайте также:

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.