Стилизация placeholder на чистом CSS
24 февраля 2018 15:04:00
12825 просмотров
Атрибут placeholder используется в полях форм и представляет собой некую подсказку для пользователей. Иногда приходится стилизовать эту подсказку под дизайн сайта, поэтому в этой статье мы рассмотрим самый простой и самый удобный способ стилизации placeholder с использованием только CSS.
Вот пример, как используется атрибут с тегами input и textarea:
<input type="text" placeholder="Введите текст"> <textarea cols="30" rows="5" placeholder="Введите текст"></textarea>
Чтобы стилизовать placeholder, воспользуемся такими CSS правилами:
::-webkit-input-placeholder { color: #c5c5c5; } ::-moz-placeholder { color: #c5c5c5; } /*Firefox 19+*/ :-moz-placeholder { color: #c5c5c5; } /*Firefox 18-*/ :-ms-input-placeholder { color: #c5c5c5; }
Сейчас мы изменили только цвет текста, но так же можно изменить следующие свойства:
- background
- opacity
- text-decoration
- text-transform
- padding
- line-height
- letter-spacing
- word-spacing
- font-weight
- font-style
- font-size
- text-overflow
- text-indent
- vertical-align
Как скрыть placeholder при клике по полю
Чтобы при клике по полю placeholder скрывался, используйте следующие правила:
:focus::-webkit-input-placeholder { color: transparent; } :focus::-moz-placeholder { color: transparent; } :focus:-moz-placeholder { color: transparent; } :focus:-ms-input-placeholder { color: transparent; }
Материалы по теме
8 мая 2018 17:53:00
Не срабатывает событие click на iPad и iPhone (iOS)
При разработке сайтов с использованием jQuery, на устройствах с операционной системой iOS (в частности браузер Safari), может возникнуть проблема с обработкой события click, из-за чего владельцам iPhone и iPad будет не доступна часть функционала сайта.
16 марта 2018 11:38:03
Запрещаем ввод любых символов кроме цифр в input
Очень часто для полей нужно запретить ввод любых символов кроме цифр. Это мы сейчас и сделаем при помощи библиотеки jQuery.