• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Стиль цвета для текста в placeholder на CSS (Изменить цвет текста-подсказки в placeholder при помощи CSS)
Стиль цвета для текста в placeholder на CSS
Kosten
Дата: Среда, 2019-08-21, 22:01 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25139
Награды: 57


Создать кардинальное изменение placeholder не так сложно как может изначально показаться. От вас требуется только прописать несколько строк кода, где сразу после этого ваша форма преобразуется и заиграет в разноцветных оттенках краски новыми.

Стилистика в CSS для атрибута placeholder="" где задается через псевдокласс ::placeholder и вендорными префиксами, которые предназначены для разных версий браузера.

::-webkit-input-placeholder
::-moz-placeholder
:-moz-placeholder
:-ms-input-placeholder


CSS

Код
input[type=text]::-webkit-input-placeholder {    
font-size: 12px;    
color: rgb(241, 234, 234);
}

input[type=text]::-moz-placeholder {    
font-size: 12px;    
color: rgb(241, 234, 234);
}

input[type=text]:-moz-placeholder {    
font-size: 12px;    
color: rgb(241, 234, 234);
}

input[type=text]:-ms-input-placeholder {    
font-size: 12px;    
color: rgb(241, 234, 234);
}

input[type=text]::placeholder {    
font-size: 12px;    
color: rgb(241, 234, 234);
}

Посмотрим на примере:




See the Pen
CSS стили для текста в плейсхолдере
by Kocsten (@kocsten)
on CodePen.






Placeholder-shown

Не забываем, что есть псевдокласс :placeholder-shown что позволит выделить инпут до того как в него будет введен текст.

CSS

Код
input[type=text]:placeholder-shown {    
border: 1px solid red;
}

На этом вся установка.

Демонстрация
Прикрепления: 1746779.png(3.9 Kb) · 2908371.png(2.8 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Стиль цвета для текста в placeholder на CSS (Изменить цвет текста-подсказки в placeholder при помощи CSS)
  • Страница 1 из 1
  • 1
Поиск: