Справочник CSS

CSS (от англ. Cascading Style Sheets «каскадные таблицы стилей») — формальный язык описания внешнего вида документа (веб-страницы)

Перед вами самый полный справочник по языку разметки CSS. Он будет полезен как новичкам так и профессионалам

Псевдокласс ::-webkit-input-placeholder

Псевдокласс, с помощью которого задаётся стилевое оформление подсказывающего текста созданного атрибутом placeholder.

Совместно с ::-webkit-input-placeholder допускается использовать свойства для изменения вида текста, например, задать шрифт и цвет.

Синтаксис

input::-webkit-input-placeholder {...}
	textarea::-webkit-input-placeholder {...}  

Значения

Нет.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
	<html>
	<head>
	 <meta charset="utf-8">
	  <title>::-webkit-input-placeholder</title>
	  <style>
	   body { background: #053f38; }
	   input[type="search"] { 
		border: 1px solid #98baba; /* Параметры рамки */
		background: transparent; /* Прозрачный фон */
		padding: 1px 4px; /* Поля вокруг текста */
		color: #fff; /* Цвет текста */
	   }
	   input[type="search"]::-webkit-input-placeholder {
		color: #ffd595; /* Цвет подсказывающего текста */
	   }
	  </style>
	 </head>
	 <body>
	  <form>
	   <p><input type="search" placeholder="Поиск по сайту" name="q">
	   <input type="submit" value="Найти"></p>
	  </form>
	 </body>
	</html>

Результат примера показан на рис. 1.

Использование псевдокласса ::-webkit-input-placeholder

Рис. 1. Использование псевдокласса ::-webkit-input-placeholder

Браузеры

Firefox поддерживают псевдокласс ::-moz-placeholder.

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
11.0+5.1+

Краткая информация

Значение по умолчаниюНет.
НаследуетсяДа
ПрименяетсяК <input>, <textarea>
Процентная записьНеприменима

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Megahub использует cookie-файлы. С их помощью мы улучшаем работу нашего портала и ваше взаимодействие с ним.