Стилизация placeholder на чистом CSS
24 февраля 2018 15:04:00
6426 просмотров
Атрибут 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; }
Материалы по теме
11 декабря 2018 21:59:49
Мобильное меню для сайта на CSS и jQuery
На дворе время мобильных устройств, а значит каждый сайт должен иметь удобную адаптивную версию. Одной из важнейших составляющих адаптивной версии сайта является мобильное меню.
24 марта 2018 14:00:56
Как защитить текст на сайте от копирования
Если у вас есть свой сайт, на котором вы пишите свои уникальные тексты и вы не хотите, чтобы ваши труды копировали недобросовестные владельцы других сайтов, то эта статья поможет вам чуть-чуть усложнить им задачу. Почему чуть-чуть? Да потому что, как ни крути, с любого сайта можно скопировать любой текст и скачать любое фото.
Комментарии ВКонтакте