Placeholder — стилизация и сокрытие при фокусе

12.10.2016 | Написал

Placeholder — текст в поле формы, подсказывающий пользователю, какие данные он должен ввести. Стандартный цвет текста плейсхолдера — светлосерый. Также стандартный плейсхолдер не пропадает при клике в поле, что может вызвать некоторое замешательство. Эти неудобства мы исправим с помощь стилей.

1. Задаем цвет placeholder следующими свойствами:

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

2. Чтобы placeholder скрывался при клике в поле, используем псевдокласс focus:

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

Все.

Метки:
Комментарии читателей статьи "Placeholder — стилизация и сокрытие при фокусе"

Нет комментариев.

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

Ваш e-mail не будет опубликован.