CSS стили для placeholder

CSS стили для placeholder

CSS стили для атрибута placeholder="" можно задать через псевдокласс ::placeholder и вендорными префиксами для разных браузеров:

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

Пример использования

<input type="text" class="demo-1" placeholder="Пример 1">

<input type="text" class="demo-2" placeholder="Пример 2">

<input type="text" class="demo-3" placeholder="Пример 3">
HTML
input[type=text]::placeholder {
	font-size: 12px;
	color: rgb(245, 245, 245);
}
input[type=text]::-webkit-input-placeholder {
	font-size: 12px;
	color: rgb(245, 245, 245);
}
input[type=text]::-moz-placeholder {
	font-size: 12px;
	color: rgb(245, 245, 245);
}
input[type=text]:-moz-placeholder {
	font-size: 12px;
	color: rgb(245, 245, 245);
}
input[type=text]:-ms-input-placeholder {
	font-size: 12px;
	color: rgb(245, 245, 245);
}
CSS

Результат:

Placeholder-shown

Также есть псевдокласс :placeholder-shown который позволяет выделить инпут до того как в него будет введен текст.

input[type=text]:placeholder-shown {
	border: 1px solid red;
}
CSS
11.10.2016, обновлено 11.01.2021
3814
Предыдущая запись Как отключить тег br
Следующая запись Clearfix – отмена действия float

Комментарии

, чтобы добавить комментарий.

Другие публикации

Показать/скрыть пароль
Чтобы включить отображение пароля в поле password нужно заменить атрибут type="password" на type="text", сделать это можно на jQuery или чистом JS.
32423
+13
Работа с Input Text jQuery
Сборник приемов JQuery для работы с текстовыми полями. Во всех примерах используется следующий html код...
75231
+11
Получить выделенный текст из текстового поля
У текстовых полей (textarea, input text и т.д.) есть JS-свойства selectionStart и selectionEnd, которые возвращают...
3250
+1
Стилизация Checkbox
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
29991
+4
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
18079
+19
Подключение шрифтов в CSS
Если не вникать в подробности, по быстрому подключить шрифт можно так...
47043
+4