Стилизация placeholder на чистом CSS
Атрибут 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; }
Материалы по теме
При разработке лендингов (Landing Page) довольно часто можно увидеть плавный скролл (прокрутку) к блокам или элементам страницы. Так же, практически на любом сайте можно встретить зафиксированную на странице кнопочку, при клике на которую пользователь быстро возвращается в начало страницы. Сейчас мы и рассмотрим как делаются такие навороты.
Комментарии ВКонтакте