Отправка сообщения






Добро пожаловать!

Стилизация placeholder в CSS

Если вы не знакомы с атрибутом placeholder, то давайте немного разъясним, что это такое и где он используется. Используется он в полях ввода формы. Атрибут выводит надпись в поле ввода, представляя роль некой подсказки. Ранее на нашем сайте был пример, с исчезающим текстом в поле ввода формы с помощью javascript, положительная сторона данного метода это кроссбраузерность. Теперь давайте поговорим о стилизации атрибута placeholder, который используется в элементах input и textarea.
Код поля ввода в нашем примере будет выглядеть примерно так:

<input type="text" placeholder="Введите ваше имя">

На выходе мы получает такое поле:

Теперь давайте представим, что нам необходимо стилизовать placeholder, для этого нам следует прописать набор правил в CSS:

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

Получаем:

Изменять мы можем не все свойства, но список большинства из них, поддерживаемых современными браузерами приведен ниже:
font (так же смежные свойства)
background (так же смежные свойства)
color
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
text-indent
text-overflow
opacity

В разных браузерах правило пишется по разному, т.к. пока нет единого стандарта, этот набор записей продолжает быть актуальным. В браузере IE, а так же firefox ниже 18 версии placeholder воспринимается как псевдокласс, а в новых браузерах firefox, webkit и blink воспринимается как псевдоэлемент.
 
Сокращение текста в placeholder
Иногда подсказки могут быть такой длины, что не способны полностью поместиться в поле ввода. Для этих целей можно так же воспользоваться дополнительными свойствами, которые позволят сократить текст placeholder-а в поле ввода.

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-a по своему. В одних браузерах он скрывается сразу при клике на поле, в других он скрывается при наличии хотя бы одного символа в поле ввода. Давайте сделаем так, чтобы текст скрывался при клике по полю, одинаково во всех браузерах.

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

Получаем такое действо:

Добавил: htmaker, 06.08.2016 г.
 
плохослабосойдетхорошоотлично (Еще не оценили)
Загрузка...

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

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

Форум на разные темы - digital-planet.info

Комментарии

  • Загрузка...

Наверх