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
Предыдущая запись Как отключить тег br
Следующая запись Clearfix – отмена действия float

Комментарии

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

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

Чтобы включить отображение пароля в поле password нужно заменить атрибут type="password" на type="text", сделать это можно на jQuery или чистом JS.
17703
+8
Сборник приемов JQuery для работы с текстовыми полями. Во всех примерах используется следующий html код...
56495
+9
У текстовых полей (textarea, input text и т.д.) есть JS-свойства selectionStart и selectionEnd, которые возвращают...
1733
+1
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
11764
+2
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
10751
+13
Выделение текста в меню, кнопках и других элементах управления лучше запретить т.к. при нескольких кликах он выделяется и визуально мешает.
2427
0