Оформляем placeholder с помощью CSS

Placeholder - это атрибут текстовых полей формы, с его помощью отображается подсказывающий текст

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

Рассмотрим псевдоэлемент ::placeholder. С его помощью задаётся стилевое оформление подсказывающего текста.

::-webkit-input-placeholder {color:#b8b8b8; opacity:1;}/* webkit */
::-moz-placeholder          {color:#b8b8b8; opacity:1;}/* Firefox 19+ */
:-moz-placeholder           {color:#b8b8b8; opacity:1;}/* Firefox 18- */
:-ms-input-placeholder      {color:#b8b8b8; opacity:1;}/* IE */

/* клик по полю скрывает placeholder */
:focus::-webkit-input-placeholder {opacity:0;}/* webkit */
:focus::-moz-placeholder          {opacity:0;}/* Firefox 19+ */
:focus:-moz-placeholder           {opacity:0;}/* Firefox 18- */
:focus:-ms-input-placeholder      {opacity:0;}/* IE */

Остались вопросы? Спрашивайте!

Понравилась статья? Расскажи другим :)

Опубликовано: 10 ноября 2017 | Просмотров: 1614