Стилизация placeholder: Стилизуем placeholder при помощи CSS. Синтаксис, трюки, поддерживаемые стили в html5

Содержание

Стилизуем placeholder при помощи CSS. Синтаксис, трюки, поддерживаемые стили в html5

Атрибут placeholder применяется для призыва к действию внутри пустых элементов input и textarea. В этой статье мы рассмотрим возможности стилизации текста placeholder-a, а также некоторые трюки, которые позволят сделать его более удобным и функциональным.

Итак, начнем с примера для тех, кто не знает, что такое placeholder.

html

<input type="text" placeholder="Оставьте сообщение здесь">

input placeholder demo

Стиль placeholder-a можно изменить с помощью такого набора css правил:

css

::-webkit-input-placeholder {color:#c0392b;}
::-moz-placeholder          {color:#c0392b;}/* Firefox 19+ */
:-moz-placeholder           {color:#c0392b;}/* Firefox 18- */
:-ms-input-placeholder      {color:#c0392b;}

Выглядит страшновато, не правда ли? Дело в том, что этого до сих пор нет в стандартах. Каждый браузер по-своему реализовал поддержку стилизации placeholder-а.

В IE и старых firefox (до 18-го) placeholder считается псевдоклассом, а в новых firefox, webkit и blink – псевдоэлементом.

Смотрим, что получилось:

input placeholder demo

Нужно сказать, что поддерживаются не все возможные css свойства. Большинство современных браузеров позволяют изменить:

font (и сопутствующие свойства)
background (и сопутствующие свойства)
color
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
text-indent
text-overflow
opacity

А если placeholder не вмещается?

Иногда поля для ввода текста сокращаются по ширине из-за особенностей лейаута, в частности на мобильных девайсах. В этом случае длинный текст placeholder-а будет некрасиво обрезан. Чтобы предотвратить это, вы можете использовать

text-overflow: ellipsis. Такой синтаксис будет работать во всех новых браузерах.

css

input[placeholder]          {text-overflow:ellipsis;}
input::-moz-placeholder     {text-overflow:ellipsis;} 
input:-moz-placeholder      {text-overflow:ellipsis;} 
input:-ms-input-placeholder {text-overflow:ellipsis;}

input placeholder demo

Как скрыть placeholder при фокусе?

Скрывание placeholder-а происходит по-разному.

в некоторых браузерах при получении фокуса инпутом
в других браузерах при наличии хотя бы одного введенного символа

Мне больше нравится первый вариант. Для того, чтобы задать такое поведение во всех браузерах, поддерживающих placeholder, определим следующие css правила:

css

:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}

input placeholder demo

Скрываем placeholder красиво

Можно также добавить transition для появления и скрытия placeholder-a:

input placeholder demo

Вот сss:

css

/* плавное изменение прозрачности  placeholder-а при фокусе */
.input1::-webkit-input-placeholder       {opacity: 1; transition: opacity 0.3s ease;}
.input1::-moz-placeholder                {opacity: 1; transition: opacity 0.3s ease;}
.input1:-moz-placeholder                 {opacity: 1; transition: opacity 0.3s ease;}
.input1:-ms-input-placeholder            {opacity: 1; transition: opacity 0.3s ease;}
.input1:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
.input1:focus::-moz-placeholder          {opacity: 0; transition: opacity 0.3s ease;}
.input1:focus:-moz-placeholder           {opacity: 0; transition: opacity 0.3s ease;}
.input1:focus:-ms-input-placeholder      {opacity: 0; transition: opacity 0.3s ease;}

/* сдвиг placeholder-а вправо при фокусе*/

.input2::-webkit-input-placeholder       {text-indent: 0px;   transition: text-indent 0.3s ease;}
.input2::-moz-placeholder                {text-indent: 0px;   transition: text-indent 0.3s ease;}
.input2:-moz-placeholder                 {text-indent: 0px;   transition: text-indent 0.3s ease;}
.input2:-ms-input-placeholder            {text-indent: 0px;   transition: text-indent 0.3s ease;}
.input2:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
.input2:focus::-moz-placeholder          {text-indent: 500px; transition: text-indent 0.3s ease;}
.input2:focus:-moz-placeholder           {text-indent: 500px; transition: text-indent 0.3s ease;}
.input2:focus:-ms-input-placeholder      {text-indent: 500px; transition: text-indent 0.3s ease;}

/* сдвиг placeholder-а вниз при фокусе*/

.input3::-webkit-input-placeholder       {line-height: 20px;  transition: line-height 0.5s ease;}
.input3::-moz-placeholder                {line-height: 20px;  transition: line-height 0.5s ease;}
.input3:-moz-placeholder                 {line-height: 20px;  transition: line-height 0.5s ease;}
.input3:-ms-input-placeholder            {line-height: 20px;  transition: line-height 0.5s ease;}
.input3:focus::-webkit-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
.input3:focus::-moz-placeholder          {line-height: 100px; transition: line-height 0.5s ease;}
.input3:focus:-moz-placeholder           {line-height: 100px; transition: line-height 0.5s ease;}
.input3:focus:-ms-input-placeholder      {line-height: 100px; transition: line-height 0.5s ease;}

Надеюсь, вам это пригодится. Пишите замечания и предложения в комментариях.

Стилизация HTML5 плейсхолдера с помощью CSS / Хабр

В HTML5 есть замечательный атрибут — placeholder (текст-подсказка для элементов ввода). Задается он следующим образом:

<input type=«text» placeholder=«type here some text» />

Обычно этот текст отображается серым цветом, но допустим у нас есть необходимость стилизовать этот текст с помощью CSS.

Пока это можно сделать только в Google Chrome, Safari и Firefox, так как в Opera пока еще нет возможность задавать для него стили, а IE не поддерживает его вовсе.

CSS правила для webkit и mozilla:

input::-webkit-input-placeholder {} input:-moz-placeholder {}

Только имейте ввиду, что нельзя совмещать эти селекторы в один, и если вы напишете:

input:-moz-placeholder, input::-webkit-input-placeholder { }

то CSS правила не будут работать. И обратите внимание, что для webkit надо писать два двоеточия, а для mozilla — одно.

Еще несколько примеров:

/* стили для webkit */ #field2::-webkit-input-placeholder { color:#00f; } #field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; } #field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }/* стили для mozilla */ #field2:-moz-placeholder { color:#00f; } #field3:-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; } #field4:-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

Также следует заметить, что разные браузеры по разному поддерживают стили для плейсхолдера. Например в Firefox вы можете задать для него цвет фона, а в Chrome нет.

Список поддерживаемых CSS стилей для атрибута placeholder:

	Chrome 10(Win 7)	Chrome 11 (Win 7)	Firefox 4(Win 7)	Safari 3.1(Win XP & OS X)	Safari 5(Win 7 & OS X)	Opera 11(Win 7)
background-color	нет	нет	+	нет	+	нет
border	нет	нет	+	нет	+	нет
color	+	+	+	нет	+	нет
font-size	+	+	+	нет	+	нет
font-style	+	+	+	нет	+	нет
font-weight	+	+	+	нет	+	нет
letter-spacing	+	+	+	нет	+	нет
line-height	нет	нет	нет	нет	нет	нет
padding top/bottom	нет	нет	+	нет	+	нет
padding left/right	нет	нет	+	нет	нет	нет
text-decoration	нет	нет	+	нет	+	нет
text-transform	нет	нет	+	нет	+	нет

Стилизуем Placeholder с помощью CSS

Используйте псевдоэлемент ::placeholder для стилизации дефолтного текста в элементе input или textarea. Большинство современных браузеров поддерживают это, но для старых браузеров требуются префиксы.

::placeholder { 
 color: deeppink;
 font-size: 5rem;
 text-transform: uppercase;
}

HTML

Префиксы

Используемый мной синтаксис поддерживается большинством современных браузеров:

::placeholder { 
 color: deeppink;
}

Но для более старых браузеров вам нужно будет использовать префиксы поставщика.

/* WebKit, Edge */
::-webkit-input-placeholder {
 color: deeppink;
}

/* Firefox 4-18 */
:-moz-placeholder { 
 color: deeppink;
 opacity: 1;
}

/* Firefox 19+ */
::-moz-placeholder { 
 color: deeppink;
 opacity: 1;
}

/* IE 10-11 */
:-ms-input-placeholder { 
 color: deeppink;
}

/* Edge */
::-ms-input-placeholder { 
 color: deeppink;
}

/* MODERN BROWSER */
::placeholder { 
 color: deeppink;
}

Вау! Я знаю, это огромный список. И вы можете заметить довольно много разных вариантов реализации. Итак, давайте разберем эти различия и поймем, что здесь происходит.

Псевдоэлемент против псевдокласса

Вы можете заметить, что я использую двойное двоеточие ::. Это называется псевдоэлементом и было введено в CSS3. Если бы мы использовали одно двоеточие :, это назвали бы псевдоклассом.

Поскольку псевдоэлемент, :: был представлен в CSS3, а не в более ранних версиях CSS, некоторые старые браузеры, такие как Internet Explorer, просто никогда не поддерживали его. Принимая во внимание, что псевдокласс, : был представлен ранее (в CSS1 и CSS2). Вот почему гораздо больше браузеров, включая Internet Explorer, поддерживают его.

Следовательно, в нашем ::placeholder префиксе поставщика вы будете использовать смесь псевдокласса и псевдоэлемента.

Непрозрачность Placeholder в Firefox по умолчанию

Хорошо, с чем это связано opacity: 1 для Firefox. Это потому, что по умолчанию для placeholder Firefox применяется значение непрозрачности. Таким образом, чтобы переопределить это, мы должны установить его принудительно. Таким образом, наш placeholder будет отображаться и не будет иметь блеклого внешнего вида по умолчанию.

CSS-обработка неверных селекторов

Таким образом, вы также можете подумать, почему мы не просто сгруппировали все префиксы вендоров вместе как в примере ниже:

::-moz-placeholder, /* Firefox 19+ */
:-moz-placeholder /* Firefox 4-18 */
{ 
 color: deeppink;
 opacity: 1;
}

Ну, это потому, что в CSS3 было правило, которое гласит:

группа селекторов, содержащая недопустимый селектор, недействительна.

Давайте посмотрим на пример, чтобы увидеть, что это значит. Вот правильный CSS-селектор

h2 {
 color: blue;
}

Так что в нашем HTML это будет выглядеть как ожидалось

Но что произойдет, если мы добавим неверный селектор CSS

h2, /* valid */
h3::poop /* invalid */
{
 color: blue;
}

Так как в группе есть недопустимый селектор CSS. Вся группа будет считаться недействительной, и стилизация не будет применена.

Вот почему нам нужны отдельные правила для каждого браузера. В противном случае вся группа будет игнорироваться всеми браузерами.

⭐️ НО! похоже, это можно изменить в CSS4.

Как правило, если в цепочке или группе селекторов присутствует недопустимый псевдоэлемент или псевдокласс, весь список селекторов является недействительным. Если псевдоэлемент (но не псевдокласс) имеет префикс -webkit-, то по состоянию на Firefox 63 браузеры Blink, Webkit и Gecko предполагают, что он действителен, не аннулирует список выбора.

Подробнее об этом читайте в статье Криса Койера «Один неверный псевдо-селектор равен целому игнорируемому селектору»

Поддерживаемые стили

Вот список всех стилей, которые вы можете применить к вашему placeholder:

background свойства
color
font свойства
letter-spacing
line-height
opacity
text-decoration
text-indent
text-transform
vertical-align
word-spacing

Проблемы доступности

Способность стилизовать заполнители — это круто. Но мне нужно отметить кое-что действительно важное — текст-заполнитель не заменяет элемент метки !! Я был виновен в этом, когда впервые попал в веб-программирование 🙁. Когда ваша форма основана исключительно на инструкциях-заполнителях без меток, это очень вредно для доступности. Доступность важна не только для того, чтобы сделать ваш веб-сайт доступным для всех, но и для повышения удобства работы пользователей. И, в конечном итоге, создание лучшего сайта или веб-приложения.

Вот действительно потрясающая статья о том, как использовать заполнители без каких-либо меток. Ниже приведены три основных тезиса:

Поскольку placeholder исчезает в при вводе, он может напрягать кратковременную память вашего пользователя
Без label пользователи не могут проверить свою работу перед отправкой формы.
Когда появляются сообщения об ошибках, люди не знают, как решить проблему.

Автоматически добавлять Vendor-префиксы

Если вы не хотите иметь дело со всеми префиксами вендоров, вы можете использовать PostCSS с плагином Autoprefixer . Этот плагин будет анализировать ваш CSS и добавлять префиксы.

Псевдоэлемент ::placeholder | CSS | WebReference

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

Синтаксис

Селектор::placeholder { ... }

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>placeholder</title> <style> body { background: #053f38; } input[type=»search»] { border: 1px solid #98baba; /* Параметры рамки */ background: transparent; /* Прозрачный фон */ padding: 1px 4px; /* Поля вокруг текста */ color: #fff; /* Цвет текста */ } input[type=»search»]::-moz-placeholder { color: #ffd595; /* Цвет подсказывающего текста */ } input[type=»search»]::-webkit-input-placeholder { color: #ffd595; } input[type=»search»]:-ms-input-placeholder { color: #ffd595; } input[type=»search»]::-ms-input-placeholder { color: #ffd595; } input[type=»search»]::placeholder { color: #ffd595; } </style> </head> <body> <form action=»handler.php»> <p><input type=»search» placeholder=»Поиск по сайту» name=»q»> <input type=»submit» value=»Найти»></p> </form> </body> </html>
Результат примера показан на рис. 1.
Рис. 1. Использование ::placeholder
Примечание
Internet Explorer использует псевдокласс :-ms-input-placeholder.
Microsoft Edge использует псевдоэлемент ::-ms-input-placeholder.
Chrome, до версии 57, Opera до версии 44, Safari до версии 10.1 и Android используют псевдоэлемент ::-webkit-input-placeholder.
Firefox с версии 4 и до 19 использует псевдокласс :-moz-placeholder.
Firefox до версии 51 использует псевдоэлемент ::-moz-placeholder.
Браузеры
В таблице браузеров применяются следующие обозначения.
— свойство полностью поддерживается браузером со всеми допустимыми значениями;
— свойство браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 30.08.2017
Редакторы: Влад Мержевич
::placeholder — Веб-технологии для разработчиков
CSS псевдоэлемент ::placeholder представляет собой текст placeholder в <input> или <textarea> элементах.
::placeholder { color: blue; font-size: 1.5em; }
В ::placeholder можно использовать только те CSS свойства, которые разрешены в псевдоэлементе ::first-line.
Note: В большинстве браузеров по умолчанию placeholder выглядит как полупрозрачный или светлосерый текст.
Синтаксис
::placeholder
Примеры
Красный текст
HTML
<input placeholder="Введите что-нибудь!">
CSS
input::placeholder { color: red; font-size: 1.2em; font-style: italic; }
Результат
Зелёный текст
HTML
<input placeholder="Введите что-нибудь...">
CSS
input::placeholder { color: green; }
Результат
Проблемы доступности
Цветовой контраст
Контрастность
Текст placeholder обычно имеет более светлую расцветку и содержит информацию о том, какие введённые данные будут допустимы, но при этом не является текущими введёнными данными.
Важно обеспечить достаточный цветовой контраст между placeholder и фоном, чтобы люди со слабым зрением могли его прочитать, но при этом должна быть достаточная разница между введённым текстом и текстом placeholder, чтобы пользователь не путал их.
Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.
Использование
Текст placeholder с высоким цветовым контрастом может быть воспринят как введённые данные. Текст placeholder исчезает, когда пользователь вводит что-либо в <input> элемент. Эти обстоятельства могут помешать заполнить правильно форму, особенно людям с когнитивными проблемами.
Другой подход к представлению информации placeholder заключается в том, чтобы расположить её вне формы ввода в непосредственной близости от неё, а затем использовать aria-describedby для программного связывания <input> элемента с подсказкой.
В таком случае содержимое подсказки будет доступно даже в том случае, если что-то введено в форму. Большинство скринридеров используют aria-describedby для чтения подсказок после того, как будет прочитан текст метки формы. Пользователь может отключить эту функцию, если дополнительная информация окажется ему ненужной.
<label for="user-email">Ваш email адрес</label> <span>Пример: [email protected]</span> <input aria-describedby="user-email-hint" name="email" type="email">
Режим высокой контрастности Windows
Текст placeholder будет отображаться с теми же стилями, что и введённый пользователем текст при работе в режиме высокой контрастности Windows. Это вызовет затруднения с определением того какой текст был введён, а какой является placeholder.
Метки
Placeholder не является заменой элемента <label>. Без метки, которая программно связывается с формой с помощью for и id аттрибутов, такие программы, как скринридеры не смогут анализировать элементы <input>.
Спецификации
Совместимость с браузерами
Update compatibility data on GitHub
Компьютеры Мобильные
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome для Android Firefox для Android Opera для Android Safari on iOS Samsung Internet
::placeholder Chrome Полная поддержка 57
Полная поддержка 57
Полная поддержка 6
С префиксом Требует вендорный префикс: -webkit-input-
Edge Полная поддержка 12
Полная поддержка 12
С префиксом Требует вендорный префикс: -webkit-input-
Полная поддержка 12
С префиксом Требует вендорный префикс: -ms-input-
Firefox Полная поддержка 51
Полная поддержка 51
Полная поддержка 19
С префиксом Требует вендорный префикс: -moz-
IE Нет поддержки Нет Opera Полная поддержка 44
Полная поддержка 44
Полная поддержка 15
С префиксом Требует вендорный префикс: -webkit-input-
Safari Полная поддержка 10.1
Полная поддержка 10.1
Полная поддержка 5
С префиксом Требует вендорный префикс: -webkit-input-
WebView Android Полная поддержка 57
Полная поддержка 57
Полная поддержка 2
С префиксом Требует вендорный префикс: -webkit-input-
Chrome Android Полная поддержка 57
Полная поддержка 57
Полная поддержка 18
С префиксом Требует вендорный префикс: -webkit-input-
Firefox Android Полная поддержка 51
Полная поддержка 51
Полная поддержка 19
С префиксом Требует вендорный префикс: -moz-
Opera Android Полная поддержка 43
Полная поддержка 43
Полная поддержка 14
С префиксом Требует вендорный префикс: -webkit-input-
Safari iOS Полная поддержка 10.3
Полная поддержка 10.3
Полная поддержка 4.3
С префиксом Требует вендорный префикс: -webkit-input-
Samsung Internet Android Полная поддержка 7.0
Полная поддержка 7.0
Полная поддержка 1.0
С префиксом Требует вендорный префикс: -webkit-input-
Легенда
Полная поддержка
Полная поддержка
Нет поддержки
Нет поддержки
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.
Смотрите также
Стилизация placeholder на чистом CSS
24 Февраля 2018 15:04:00
4782 просмотра
Автор: Николай Ковалёв
Атрибут 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; }
Стилизация placeholder в CSS — Блог о веб-разработке
Если вы не знакомы с атрибутом placeholder, то давайте немного разъясним, что это такое и где он используется. Используется он в полях ввода формы. Атрибут выводит надпись в поле ввода, представляя роль некой подсказки. Ранее на нашем сайте был пример, с исчезающим текстом в поле ввода формы с помощью javascript, положительная сторона данного метода это кроссбраузерность. Теперь давайте поговорим о стилизации атрибута placeholder, который используется в элементах input и textarea.
Код поля ввода в нашем примере будет выглядеть примерно так:
<input type="text" placeholder="Введите ваше имя">
На выходе мы получает такое поле:
Теперь давайте представим, что нам необходимо стилизовать placeholder, для этого нам следует прописать набор правил в CSS:
::-webkit-input-placeholder { color: #c1c1c1; } ::-moz-placeholder { color: #c1c1c1; } /* Firefox 19+ */ :-moz-placeholder { color: #c1c1c1; } /* Firefox 18- */ :-ms-input-placeholder { color: #c1c1c1; }
Получаем:
Изменять мы можем не все свойства, но список большинства из них, поддерживаемых современными браузерами приведен ниже:
• font (так же смежные свойства)
• background (так же смежные свойства)
• color
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• text-indent
• text-overflow
• opacity
В разных браузерах правило пишется по разному, т.к. пока нет единого стандарта, этот набор записей продолжает быть актуальным. В браузере IE, а так же firefox ниже 18 версии placeholder воспринимается как псевдокласс, а в новых браузерах firefox, webkit и blink воспринимается как псевдоэлемент.

Сокращение текста в placeholder
Иногда подсказки могут быть такой длины, что не способны полностью поместиться в поле ввода. Для этих целей можно так же воспользоваться дополнительными свойствами, которые позволят сократить текст placeholder-а в поле ввода.
input[placeholder] { text-overflow:ellipsis; } input::-moz-placeholder { text-overflow:ellipsis; } input:-moz-placeholder { text-overflow:ellipsis; } input:-ms-input-placeholder { text-overflow:ellipsis; }
В результате получаем поле ввода такого с placeholder такого вида:

Скрываем текст при клике по полю
По умолчанию каждый браузер интерпретирует реакцию placeholder-a по своему. В одних браузерах он скрывается сразу при клике на поле, в других он скрывается при наличии хотя бы одного символа в поле ввода. Давайте сделаем так, чтобы текст скрывался при клике по полю, одинаково во всех браузерах.
:focus::-webkit-input-placeholder { color: transparent; } :focus::-moz-placeholder { color: transparent; } :focus:-moz-placeholder { color: transparent; } :focus:-ms-input-placeholder { color: transparent; }
Получаем такое действо:
Цвет заполнителя — Tailwind CSS
.placeholder-transparent :: placeholder цвет: прозрачный; Aa
.placeholder-current :: placeholder color: currentColor; Aa
.placeholder-black :: placeholder color: # 000; Aa
.placeholder-white :: placeholder color: #fff; Aa
.placeholder-gray-100 :: placeholder color: # f7fafc; Аа
.placeholder-gray-200 :: placeholder цвет: # edf2f7; Aa
.placeholder-gray-300 :: placeholder color: # e2e8f0; Aa
.placeholder-gray-400 :: placeholder color: # cbd5e0; Aa
.placeholder-gray-500 :: placeholder color: # a0aec0; Aa
.placeholder-gray-600 :: placeholder color: # 718096; Аа
.placeholder-gray-700 :: placeholder цвет: # 4a5568; Aa
.placeholder-gray-800 :: placeholder color: # 2d3748; Aa
.placeholder-gray-900 :: placeholder color: # 1a202c; Aa
.placeholder-red-100 :: placeholder color: # fff5f5; Aa
.placeholder-red-200 :: placeholder color: # fed7d7; Аа
.placeholder-red-300 :: placeholder цвет: # feb2b2; Aa
.placeholder-red-400 :: placeholder color: # fc8181; Aa
.placeholder-red-500 :: заполнитель цвет: # f56565; Aa
.placeholder-red-600 :: placeholder color: # e53e3e; Aa
.placeholder-red-700 :: placeholder color: # c53030; Аа
.placeholder-red-800 :: placeholder цвет: # 9b2c2c; Aa
.placeholder-red-900 :: placeholder color: # 742a2a; Aa
.placeholder-orange-100 :: placeholder цвет: # fffaf0; Aa
.placeholder-orange-200 :: placeholder color: # feebc8; Aa
.placeholder-orange-300 :: placeholder color: # fbd38d; Аа
.placeholder-orange-400 :: placeholder цвет: # f6ad55; Aa
.placeholder-orange-500 :: заполнитель цвет: # ed8936; Aa
.placeholder-orange-600 :: заполнитель цвет: # dd6b20; Aa
.placeholder-orange-700 :: заполнитель цвет: # c05621; Aa
.placeholder-orange-800 :: placeholder цвет: # 9c4221; Аа
.placeholder-orange-900 :: placeholder цвет: # 7b341e; Aa
.placeholder-yellow-100 :: placeholder color: # fffff0; Aa
.placeholder-yellow-200 :: placeholder color: #fefcbf; Aa
.placeholder-yellow-300 :: placeholder color: # faf089; Aa
.placeholder-yellow-400 :: placeholder color: # f6e05e; Аа
.placeholder-yellow-500 :: placeholder цвет: # ecc94b; Aa
.placeholder-yellow-600 :: placeholder color: # d69e2e; Aa
.placeholder-yellow-700 :: placeholder color: # b7791f; Aa
.placeholder-yellow-800 :: placeholder color: # 975a16; Aa
.placeholder-yellow-900 :: placeholder color: # 744210; Аа
.placeholder-green-100 :: placeholder цвет: # f0fff4; Aa
.placeholder-green-200 :: placeholder color: # c6f6d5; Aa
.placeholder-green-300 :: placeholder color: # 9ae6b4; Aa
.placeholder-green-400 :: placeholder color: # 68d391; Aa
.placeholder-green-500 :: placeholder color: # 48bb78; Аа
.placeholder-green-600 :: placeholder цвет: # 38a169; Aa
.placeholder-green-700 :: placeholder color: # 2f855a; Aa
.placeholder-green-800 :: placeholder color: # 276749; Aa
.placeholder-green-900 :: placeholder color: # 22543d; Aa
.placeholder-teal-100 :: заполнитель цвет: # e6fffa; Аа
.placeholder-teal-200 :: placeholder цвет: # b2f5ea; Aa
.placeholder-teal-300 :: заполнитель цвет: # 81e6d9; Aa
.placeholder-teal-400 :: заполнитель цвет: # 4fd1c5; Aa
.placeholder-teal-500 :: заполнитель цвет: # 38b2ac; Aa
.placeholder-teal-600 :: заполнитель цвет: # 319795; Аа
.placeholder-teal-700 :: placeholder цвет: # 2c7a7b; Aa
.placeholder-teal-800 :: placeholder color: # 285e61; Aa
.placeholder-teal-900 :: заполнитель цвет: # 234e52; Aa
.placeholder-blue-100 :: placeholder color: # ebf8ff; Aa
.placeholder-blue-200 :: placeholder color: # bee3f8; Аа
.placeholder-blue-300 :: placeholder цвет: # 90cdf4; Aa
.placeholder-blue-400 :: placeholder color: # 63b3ed; Aa
.placeholder-blue-500 :: placeholder color: # 4299e1; Aa
.placeholder-blue-600 :: placeholder color: # 3182ce; Aa
.placeholder-blue-700 :: placeholder color: # 2b6cb0; Аа
.placeholder-blue-800 :: placeholder цвет: # 2c5282; Aa
.placeholder-blue-900 :: placeholder color: # 2a4365; Aa
.placeholder-indigo-100 :: заполнитель цвет: # ebf4ff; Aa
.placeholder-indigo-200 :: заполнитель цвет: # c3dafe; Aa
.placeholder-indigo-300 :: заполнитель цвет: # a3bffa; Аа
.placeholder-indigo-400 :: placeholder цвет: # 7f9cf5; Aa
.placeholder-indigo-500 :: заполнитель color: # 667eea; Aa
.placeholder-indigo-600 :: заполнитель цвет: # 5a67d8; Aa
.placeholder-indigo-700 :: заполнитель цвет: # 4c51bf; Aa
.placeholder-indigo-800 :: заполнитель цвет: # 434190; Аа
.заполнитель-индиго-900 :: заполнитель цвет: # 3c366b; Aa
.placeholder-purple-100 :: placeholder color: # faf5ff; Aa
.placeholder-purple-200 :: placeholder color: # e9d8fd; Aa
.placeholder-purple-300 :: placeholder color: # d6bcfa; Aa
.placeholder-purple-400 :: placeholder color: # b794f4; Аа
.placeholder-purple-500 :: placeholder цвет: # 9f7aea; Aa
.placeholder-purple-600 :: placeholder color: # 805ad5; Aa
.placeholder-purple-700 :: placeholder color: # 6b46c1; Aa
.placeholder-purple-800 :: placeholder color: # 553c9a; Aa
.placeholder-purple-900 :: placeholder color: # 44337a; Аа
.placeholder-pink-100 :: placeholder цвет: # fff5f7; Aa
.placeholder-pink-200 :: placeholder цвет: # fed7e2; Aa
.placeholder-pink-300 :: placeholder color: # fbb6ce; Aa
.placeholder-pink-400 :: placeholder цвет: # f687b3; Aa
.placeholder-pink-500 :: заполнитель цвет: # ed64a6; Аа
.placeholder-pink-600 :: placeholder цвет: # d53f8c; Aa
.placeholder-pink-700 :: placeholder цвет: # b83280; Aa
.placeholder-pink-800 :: placeholder color: # 97266d; Aa
.placeholder-pink-900 :: placeholder color: # 702459; Аа
.
html — стиль текста заполнителя Ionic 2
Переполнение стека
Около
Товары
Для команд
Переполнение стека Общественные вопросы и ответы
Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
работы Программирование и связанные с ним технические возможности карьерного роста
Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
реклама Обратитесь к разработчикам и технологам со всего мира
О компании
.
Шаблоны стилей с помощью CSS. Синтаксис, советы и рекомендации, поддерживаемые стили HTML5 — Frontend Babel
Атрибут
Placeholder используется для указания действия внутри пустых элементов, таких как input или textarea. В этой статье мы рассмотрим возможность стилизации текста-заполнителя, а также некоторые уловки, чтобы сделать его более удобным и функциональным.
Начнем с примера для тех, кто не знает, что такое заполнитель.

Стили заполнителя можно изменить с помощью следующих правил CSS:
:: - webkit-input-placeholder {color: # c0392b;} :: - moz-placeholder {color: # c0392b;} / * Firefox 19+ * / : -moz-placeholder {color: # c0392b;} / * Firefox 18- * / : -ms-input-placeholder {color: # c0392b;}
Выглядит страшно, правда? На самом деле это еще не стандартизовано.Каждый браузер по-своему реализует стиль заполнителя.
В IE и старом Firefox (до версии 18) заполнитель считается псевдоклассом, тогда как в новых Firefox, Webkit и Blink он является псевдоэлементом.
Посмотрим, что получится:
Не все свойства CSS полностью поддерживаются. Большинство современных браузеров позволяют вам изменить:
шрифт (и связанные свойства) фон (и связанные свойства) цвет межсловный интервал Межбуквенное расстояние текст-отделка вертикальное выравнивание текст-преобразования высота линии отступ текста переполнение текста непрозрачность
Иногда ширина вводимого текста уменьшается (в зависимости от макета), особенно на мобильных устройствах.В этом случае текст-заполнитель будет обрезан, если он будет слишком длинным. Это выглядит некрасиво 🙂 Чтобы этого не произошло, можно использовать text-overflow: ellipsis . Этот синтаксис работает во всех современных браузерах.
ввод [заполнитель] {text-overflow: ellipsis;} input :: - moz-placeholder {text-overflow: ellipsis;} ввод: -moz-placeholder {переполнение текста: многоточие;} input: -ms-input-placeholder {text-overflow: ellipsis;}
Скрытие заполнителя несовместимо в разных браузерах.
В некоторых браузерах это происходит, когда поле ввода сфокусировано
В других браузерах это происходит только после ввода хотя бы одного символа
Мне первый вариант нравится. Чтобы реализовать это поведение во всех браузерах, поддерживающих заполнители, определите следующие правила CSS:
: focus :: - webkit-input-placeholder {color: transparent} : focus :: - moz-placeholder {color: transparent} : focus: -moz-placeholder {цвет: прозрачный} : focus: -ms-input-placeholder {color: transparent}
Заполнитель скрывается на фокусе
Вы можете добавить переход для отображения и скрытия заполнителя:
Исчезновение заполнителя в фокусе
Сдвинуть местозаполнитель в фокусе вправо
Сдвинуть местозаполнитель в фокусе вниз
Вот CSS:
/ * исчезновение заполнителя в фокусе * / .input1 :: - webkit-input-placeholder {непрозрачность: 1; переход: непрозрачность 0,3 с легкость;} .input1 :: - moz-заполнитель {непрозрачность: 1; переход: непрозрачность 0,3 с легкость;} .input1: -moz-placeholder {непрозрачность: 1; переход: непрозрачность 0,3 с легкость;} .input1: -ms-input-placeholder {непрозрачность: 1; переход: непрозрачность 0,3 с легкость;} .input1: focus :: - webkit-input-placeholder {непрозрачность: 0; переход: непрозрачность 0,3 с легкость;} .input1: focus :: - moz-placeholder {opacity: 0; переход: непрозрачность 0.3с легкость;} .input1: фокус: -moz-placeholder {непрозрачность: 0; переход: непрозрачность 0,3 с легкость;} .input1: фокус: -ms-input-placeholder {непрозрачность: 0; переход: непрозрачность 0,3 с легкость;} / * сдвиг вправо в фокусе * / .input2 :: - webkit-input-placeholder {текст-отступ: 0px; transition: text-indent 0.3s;} .input2 :: - moz-placeholder {текст-отступ: 0px; transition: text-indent 0.3s;} .input2: -moz-placeholder {текст-отступ: 0px; переход: текст-отступ 0.3с легкость;} .input2: -ms-input-placeholder {текст-отступ: 0px; transition: text-indent 0.3s;} .input2: focus :: - webkit-input-placeholder {текст-отступ: 500 пикселей; transition: text-indent 0.3s;} .input2: focus :: - moz-placeholder {text-indent: 500 пикселей; transition: text-indent 0.3s;} .input2: focus: -moz-placeholder {текст-отступ: 500 пикселей; transition: text-indent 0.3s;} .input2: focus: -ms-input-placeholder {текст-отступ: 500 пикселей; transition: text-indent 0.3s;} / * сдвинуть заполнитель вниз в фокусе * / .input3 :: - webkit-input-placeholder {высота строки: 20 пикселей; transition: line-height 0.5s легкость;} .input3 :: - moz-заполнитель {высота строки: 20 пикселей; transition: line-height 0.5s легкость;} .input3: -moz-placeholder {высота строки: 20 пикселей; transition: line-height 0.5s легкость;} .input3: -ms-input-placeholder {высота строки: 20 пикселей; transition: line-height 0.5s легкость;} .input3: focus :: - webkit-input-placeholder {высота строки: 100 пикселей; transition: line-height 0.5s легкость;} .input3: focus :: - moz-placeholder {высота строки: 100 пикселей; переход: высота строки 0.5s легкость;} .input3: focus: -moz-placeholder {высота строки: 100 пикселей; transition: line-height 0.5s легкость;} .input3: focus: -ms-input-placeholder {высота строки: 100 пикселей; переход: высота строки 0,5 с легкость;}
Надеюсь, вы найдете это полезным. Пожалуйста, оставьте свои комментарии и предложения ниже.
9 сентября 2015
.
: показан заполнитель — веб-технологии для разработчиков
Псевдокласс CSS : placeholder-shown представляет любой элемент или </code>, который в настоящее время отображает текст заполнителя. </p><pre> / * Выбирает любой элемент с активным заполнителем * / : placeholder-shown { граница: 2px сплошное серебро; } </pre><h3><span class="ez-toc-section" id="i-27"> Синтаксис </span></h3><pre>: показан заполнитель </pre><h3><span class="ez-toc-section" id="i-28"> Примеры </span></h3> <h4><span class="ez-toc-section" id="i-29"> Базовый пример </span></h4> <p> В этом примере при отображении заполнителя применяются специальные стили шрифта и границ.</p> <h5><span class="ez-toc-section" id="HTML-3"> HTML </span></h5><pre> <input placeholder = "Напишите что-нибудь здесь!"> </pre><h5><span class="ez-toc-section" id="CSS-4"> CSS </span></h5><pre> input { граница: сплошной черный 1px; отступ: 3 пикселя; } input: placeholder-shown { цвет границы: бирюзовый; цвет: фиолетовый; стиль шрифта: курсив; } </pre><h5><span class="ez-toc-section" id="i-30"> Результат </span></h5> <h4><span class="ez-toc-section" id="i-31"> Переполненный текст </span></h4> <p> Если поля формы слишком малы, текст-заполнитель может нежелательно обрезаться. Вы можете использовать свойство <code> text-overflow </code>, чтобы изменить способ отображения переполненного текста.</p> <h5><span class="ez-toc-section" id="HTML-4"> HTML </span></h5><pre> <input placeholder = "Имя, ранг и серийный номер"> <br> <br> <input placeholder = "Имя, ранг и серийный номер"> </pre><h5><span class="ez-toc-section" id="CSS-5"> CSS </span></h5><pre> # input2: placeholder-shown { переполнение текста: многоточие; } </pre><h5><span class="ez-toc-section" id="i-32"> Результат </span></h5> <h4><span class="ez-toc-section" id="i-33"> Индивидуальное поле ввода </span></h4> <p> В следующем примере поля кода ветки и идентификатора выделены в настраиваемом стиле. </p> <h5><span class="ez-toc-section" id="HTML-5"> HTML </span></h5><pre> <форма> <p> <label for = "name"> Введите имя студента: </label> <input placeholder = "Имя учащегося" /> </ Р> <p> <label for = "branch"> Введите студенческую ветвь: </label> <input placeholder = "Student Branch" /> </ Р> <p> <label for = "sid"> Введите идентификатор студента: </label> <input type = "number" pattern = "[0-9] {8}" title = "8-значный идентификатор" placeholder = "8-значный идентификатор" /> </ Р> <input type = "submit" /> </form> </pre><h5><span class="ez-toc-section" id="CSS-6"> CSS </span></h5><pre> input { цвет фона: # E8E8E8; черный цвет; } вход.studentid: placeholder-shown { цвет фона: желтый; красный цвет; стиль шрифта: курсив; } </pre><h5><span class="ez-toc-section" id="i-34"> Результат </span></h5> <h3><span class="ez-toc-section" id="i-35"> Технические характеристики </span></h3> <h3><span class="ez-toc-section" id="i-36"> Совместимость с браузером </span></h3> Обновите данные о совместимости на GitHub <table> <thead> <tr> <td/> <th colspan="6"> Desktop </th> <th colspan="6"> Mobile </th> </tr> <tr> <td/> <th> Chrome </th> <th> Edge </th> <th> Firefox </th> <th> Internet Explorer </th> <th> Opera </th> <th> Safari </th> <th> Android webview </th> <th> Chrome для Android </th> <th> Firefox для Android </th> <th> Opera для Android </th> <th> Safari на iOS </th> <th> Samsung Internet </th> </tr> </thead> <tbody> <tr> <th scope="row"> <code>: отображается заполнитель </code> </th> <td> Chrome <abbr title="Full support"> Полная поддержка </abbr> 47 </td> <td> Кромка <abbr title="Full support"> Полная поддержка </abbr> 79 </td> <td> Firefox <abbr title="Full support"> Полная поддержка </abbr> 51 <dl> <dt> <abbr title="Full support"> Полная поддержка </abbr> 51 </dt> <dd/> <dt> <abbr title="No support"> Нет поддержки </abbr> 4-51 </dt> <dd> <abbr title="Uses the non-standard name: <code>:-moz-placeholder</code>"> Альтернативное имя <i/> </abbr> Использует нестандартное имя: <code>: -moz-placeholder </code> </dd> </dl> </td> <td> IE <abbr title="Full support"> Полная поддержка </abbr> 10 <dl> <dt> <abbr title="Full support"> Полная поддержка </abbr> 10 </dt> <dd> <abbr title="Uses the non-standard name: <code>:-ms-input-placeholder</code>"> Альтернативное имя <i/> </abbr> Использует нестандартное имя: <code>: -ms-input-placeholder </code> </dd> </dl> </td> <td> Opera <abbr title="Full support"> Полная поддержка </abbr> 34 </td> <td> Safari <abbr title="Full support"> Полная поддержка </abbr> 9 </td> <td> WebView Android <abbr title="Full support"> Полная поддержка </abbr> 47 </td> <td> Chrome Android <abbr title="Full support"> Полная поддержка </abbr> 47 </td> <td> Firefox Android <abbr title="Full support"> Полная поддержка </abbr> 51 <dl> <dt> <abbr title="Full support"> Полная поддержка </abbr> 51 </dt> <dd/> <dt> <abbr title="No support"> Нет поддержки </abbr> 4 — 51 </dt> <dd> <abbr title="Uses the non-standard name: <code>:-moz-placeholder</code>"> Альтернативное имя <i/> </abbr> Использует нестандартное имя: <code>: -moz-placeholder </code> </dd> </dl> </td> <td> Opera Android <abbr title="Full support"> Полная поддержка </abbr> 34 </td> <td> Safari iOS <abbr title="Full support"> Полная поддержка </abbr> 9 </td> <td> Samsung Internet Android <abbr title="Full support"> Полная поддержка </abbr> 5.0 </td> </tr> <tr> <th scope="row"> Поддержка не <code> элементов type = "text" </code> (например, <code> type = "number" </code> или <code> type = "time" </code>) </th> <td> Chrome <abbr title="Full support"> Полная поддержка </abbr> 47 </td> <td> Кромка <abbr title="Full support"> Полная поддержка </abbr> 79 </td> <td> Firefox <abbr title="Full support"> Полная поддержка </abbr> 59 </td> <td> IE <abbr title="No support"> Нет поддержки </abbr> № </td> <td> Opera <abbr title="Full support"> Полная поддержка </abbr> 34 </td> <td> Safari <abbr title="Full support"> Полная поддержка </abbr> 9 </td> <td> WebView Android <abbr title="Full support"> Полная поддержка </abbr> 47 </td> <td> Chrome Android <abbr title="Full support"> Полная поддержка </abbr> 47 </td> <td> Firefox Android <abbr title="Full support"> Полная поддержка </abbr> 59 </td> <td> Opera Android <abbr title="Full support"> Полная поддержка </abbr> 34 </td> <td> Safari iOS <abbr title="Full support"> Полная поддержка </abbr> 9 </td> <td> Samsung Internet Android <abbr title="Full support"> Полная поддержка </abbr> 5.0 </td> </tr> </tbody> </table> <h4><span class="ez-toc-section" id="i-37"> Условные обозначения </span></h4> <dl> <dt> <abbr title="Full support"> Полная поддержка </abbr> </dt> <dd> Полная поддержка </dd> <dt> <abbr title="No support"> Нет поддержки </abbr> </dt> <dd> Нет поддержки </dd> <dt> <abbr title="Uses a non-standard name."> Использует нестандартное имя. <i/> </abbr> </dt> <dd> Использует нестандартное имя. </dd> </dl> <h3><span class="ez-toc-section" id="i-38"> См. Также </span></h3> .<div class='yarpp-related yarpp-related-none'> <p>No related posts.</p> </div> </div> </div> <div class="post-sharrre group"> <div id="twitter" data-url="https://ylianova.ru/raznoe-2/stilizacziya-placeholder-stilizuem-placeholder-pri-pomoshhi-css-sintaksis-tryuki-podderzhivaemye-stili-v-html5.html" data-text="Стилизация placeholder: Стилизуем placeholder при помощи CSS. Синтаксис, трюки, поддерживаемые стили в html5" data-title="Tweet"></div> <div id="facebook" data-url="https://ylianova.ru/raznoe-2/stilizacziya-placeholder-stilizuem-placeholder-pri-pomoshhi-css-sintaksis-tryuki-podderzhivaemye-stili-v-html5.html" data-text="Стилизация placeholder: Стилизуем placeholder при помощи CSS. Синтаксис, трюки, поддерживаемые стили в html5" data-title="Like"></div> <div id="googleplus" data-url="https://ylianova.ru/raznoe-2/stilizacziya-placeholder-stilizuem-placeholder-pri-pomoshhi-css-sintaksis-tryuki-podderzhivaemye-stili-v-html5.html" data-text="Стилизация placeholder: Стилизуем placeholder при помощи CSS. Синтаксис, трюки, поддерживаемые стили в html5" data-title="+1"></div> <div id="pinterest" data-url="https://ylianova.ru/raznoe-2/stilizacziya-placeholder-stilizuem-placeholder-pri-pomoshhi-css-sintaksis-tryuki-podderzhivaemye-stili-v-html5.html" data-text="Стилизация placeholder: Стилизуем placeholder при помощи CSS. Синтаксис, трюки, поддерживаемые стили в html5" data-title="Pin It"></div> </div> </div> </article> <ul class="post-nav group"> <li class="next"><a href="https://ylianova.ru/shablon-2/shablon-sajta-php-shablony-dlya-sajtov-php-designer-2.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong> <span>Шаблон сайта php: Шаблоны для сайтов — PHP Designer</span></a></li> <li class="previous"><a href="https://ylianova.ru/javascript/programmy-dlya-programmirovaniya-na-javascript-6-redaktorov-dlya-raboty-s-javascript-2.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Программы для программирования на javascript: 6 редакторов для работы с JavaScript</span></a></li> </ul> <section id="comments" class="themeform"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe-2/stilizacziya-placeholder-stilizuem-placeholder-pri-pomoshhi-css-sintaksis-tryuki-podderzhivaemye-stili-v-html5.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://ylianova.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required">
Имя *
Email *
Сайт

	Компьютеры						Мобильные
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome для Android	Firefox для Android	Opera для Android	Safari on iOS	Samsung Internet
`::placeholder`	Chrome Полная поддержка 57 Полная поддержка 57 Полная поддержка 6 С префиксом Требует вендорный префикс: -webkit-input-	Edge Полная поддержка 12 Полная поддержка 12 С префиксом Требует вендорный префикс: -webkit-input- Полная поддержка 12 С префиксом Требует вендорный префикс: -ms-input-	Firefox Полная поддержка 51 Полная поддержка 51 Полная поддержка 19 С префиксом Требует вендорный префикс: -moz-	IE Нет поддержки Нет	Opera Полная поддержка 44 Полная поддержка 44 Полная поддержка 15 С префиксом Требует вендорный префикс: -webkit-input-	Safari Полная поддержка 10.1 Полная поддержка 10.1 Полная поддержка 5 С префиксом Требует вендорный префикс: -webkit-input-	WebView Android Полная поддержка 57 Полная поддержка 57 Полная поддержка 2 С префиксом Требует вендорный префикс: -webkit-input-	Chrome Android Полная поддержка 57 Полная поддержка 57 Полная поддержка 18 С префиксом Требует вендорный префикс: -webkit-input-	Firefox Android Полная поддержка 51 Полная поддержка 51 Полная поддержка 19 С префиксом Требует вендорный префикс: -moz-	Opera Android Полная поддержка 43 Полная поддержка 43 Полная поддержка 14 С префиксом Требует вендорный префикс: -webkit-input-	Safari iOS Полная поддержка 10.3 Полная поддержка 10.3 Полная поддержка 4.3 С префиксом Требует вендорный префикс: -webkit-input-	Samsung Internet Android Полная поддержка 7.0 Полная поддержка 7.0 Полная поддержка 1.0 С префиксом Требует вендорный префикс: -webkit-input-

.placeholder-transparent :: placeholder	цвет: прозрачный;	Aa
.placeholder-current :: placeholder	color: currentColor;	Aa
.placeholder-black :: placeholder	color: # 000;	Aa
.placeholder-white :: placeholder	color: #fff;	Aa
.placeholder-gray-100 :: placeholder	color: # f7fafc;	Аа
.placeholder-gray-200 :: placeholder	цвет: # edf2f7;	Aa
.placeholder-gray-300 :: placeholder	color: # e2e8f0;	Aa
.placeholder-gray-400 :: placeholder	color: # cbd5e0;	Aa
.placeholder-gray-500 :: placeholder	color: # a0aec0;	Aa
.placeholder-gray-600 :: placeholder	color: # 718096;	Аа
.placeholder-gray-700 :: placeholder	цвет: # 4a5568;	Aa
.placeholder-gray-800 :: placeholder	color: # 2d3748;	Aa
.placeholder-gray-900 :: placeholder	color: # 1a202c;	Aa
.placeholder-red-100 :: placeholder	color: # fff5f5;	Aa
.placeholder-red-200 :: placeholder	color: # fed7d7;	Аа
.placeholder-red-300 :: placeholder	цвет: # feb2b2;	Aa
.placeholder-red-400 :: placeholder	color: # fc8181;	Aa
.placeholder-red-500 :: заполнитель	цвет: # f56565;	Aa
.placeholder-red-600 :: placeholder	color: # e53e3e;	Aa
.placeholder-red-700 :: placeholder	color: # c53030;	Аа
.placeholder-red-800 :: placeholder	цвет: # 9b2c2c;	Aa
.placeholder-red-900 :: placeholder	color: # 742a2a;	Aa
.placeholder-orange-100 :: placeholder	цвет: # fffaf0;	Aa
.placeholder-orange-200 :: placeholder	color: # feebc8;	Aa
.placeholder-orange-300 :: placeholder	color: # fbd38d;	Аа
.placeholder-orange-400 :: placeholder	цвет: # f6ad55;	Aa
.placeholder-orange-500 :: заполнитель	цвет: # ed8936;	Aa
.placeholder-orange-600 :: заполнитель	цвет: # dd6b20;	Aa
.placeholder-orange-700 :: заполнитель	цвет: # c05621;	Aa
.placeholder-orange-800 :: placeholder	цвет: # 9c4221;	Аа
.placeholder-orange-900 :: placeholder	цвет: # 7b341e;	Aa
.placeholder-yellow-100 :: placeholder	color: # fffff0;	Aa
.placeholder-yellow-200 :: placeholder	color: #fefcbf;	Aa
.placeholder-yellow-300 :: placeholder	color: # faf089;	Aa
.placeholder-yellow-400 :: placeholder	color: # f6e05e;	Аа
.placeholder-yellow-500 :: placeholder	цвет: # ecc94b;	Aa
.placeholder-yellow-600 :: placeholder	color: # d69e2e;	Aa
.placeholder-yellow-700 :: placeholder	color: # b7791f;	Aa
.placeholder-yellow-800 :: placeholder	color: # 975a16;	Aa
.placeholder-yellow-900 :: placeholder	color: # 744210;	Аа
.placeholder-green-100 :: placeholder	цвет: # f0fff4;	Aa
.placeholder-green-200 :: placeholder	color: # c6f6d5;	Aa
.placeholder-green-300 :: placeholder	color: # 9ae6b4;	Aa
.placeholder-green-400 :: placeholder	color: # 68d391;	Aa
.placeholder-green-500 :: placeholder	color: # 48bb78;	Аа
.placeholder-green-600 :: placeholder	цвет: # 38a169;	Aa
.placeholder-green-700 :: placeholder	color: # 2f855a;	Aa
.placeholder-green-800 :: placeholder	color: # 276749;	Aa
.placeholder-green-900 :: placeholder	color: # 22543d;	Aa
.placeholder-teal-100 :: заполнитель	цвет: # e6fffa;	Аа
.placeholder-teal-200 :: placeholder	цвет: # b2f5ea;	Aa
.placeholder-teal-300 :: заполнитель	цвет: # 81e6d9;	Aa
.placeholder-teal-400 :: заполнитель	цвет: # 4fd1c5;	Aa
.placeholder-teal-500 :: заполнитель	цвет: # 38b2ac;	Aa
.placeholder-teal-600 :: заполнитель	цвет: # 319795;	Аа
.placeholder-teal-700 :: placeholder	цвет: # 2c7a7b;	Aa
.placeholder-teal-800 :: placeholder	color: # 285e61;	Aa
.placeholder-teal-900 :: заполнитель	цвет: # 234e52;	Aa
.placeholder-blue-100 :: placeholder	color: # ebf8ff;	Aa
.placeholder-blue-200 :: placeholder	color: # bee3f8;	Аа
.placeholder-blue-300 :: placeholder	цвет: # 90cdf4;	Aa
.placeholder-blue-400 :: placeholder	color: # 63b3ed;	Aa
.placeholder-blue-500 :: placeholder	color: # 4299e1;	Aa
.placeholder-blue-600 :: placeholder	color: # 3182ce;	Aa
.placeholder-blue-700 :: placeholder	color: # 2b6cb0;	Аа
.placeholder-blue-800 :: placeholder	цвет: # 2c5282;	Aa
.placeholder-blue-900 :: placeholder	color: # 2a4365;	Aa
.placeholder-indigo-100 :: заполнитель	цвет: # ebf4ff;	Aa
.placeholder-indigo-200 :: заполнитель	цвет: # c3dafe;	Aa
.placeholder-indigo-300 :: заполнитель	цвет: # a3bffa;	Аа
.placeholder-indigo-400 :: placeholder	цвет: # 7f9cf5;	Aa
.placeholder-indigo-500 :: заполнитель	color: # 667eea;	Aa
.placeholder-indigo-600 :: заполнитель	цвет: # 5a67d8;	Aa
.placeholder-indigo-700 :: заполнитель	цвет: # 4c51bf;	Aa
.placeholder-indigo-800 :: заполнитель	цвет: # 434190;	Аа
.заполнитель-индиго-900 :: заполнитель	цвет: # 3c366b;	Aa
.placeholder-purple-100 :: placeholder	color: # faf5ff;	Aa
.placeholder-purple-200 :: placeholder	color: # e9d8fd;	Aa
.placeholder-purple-300 :: placeholder	color: # d6bcfa;	Aa
.placeholder-purple-400 :: placeholder	color: # b794f4;	Аа
.placeholder-purple-500 :: placeholder	цвет: # 9f7aea;	Aa
.placeholder-purple-600 :: placeholder	color: # 805ad5;	Aa
.placeholder-purple-700 :: placeholder	color: # 6b46c1;	Aa
.placeholder-purple-800 :: placeholder	color: # 553c9a;	Aa
.placeholder-purple-900 :: placeholder	color: # 44337a;	Аа
.placeholder-pink-100 :: placeholder	цвет: # fff5f7;	Aa
.placeholder-pink-200 :: placeholder	цвет: # fed7e2;	Aa
.placeholder-pink-300 :: placeholder	color: # fbb6ce;	Aa
.placeholder-pink-400 :: placeholder	цвет: # f687b3;	Aa
.placeholder-pink-500 :: заполнитель	цвет: # ed64a6;	Аа
.placeholder-pink-600 :: placeholder	цвет: # d53f8c;	Aa
.placeholder-pink-700 :: placeholder	цвет: # b83280;	Aa
.placeholder-pink-800 :: placeholder	color: # 97266d;	Aa
.placeholder-pink-900 :: placeholder	color: # 702459;	Аа

Стилизация placeholder: Стилизуем placeholder при помощи CSS. Синтаксис, трюки, поддерживаемые стили в html5

Стилизуем placeholder при помощи CSS. Синтаксис, трюки, поддерживаемые стили в html5

html

css

А если placeholder не вмещается?

css

Как скрыть placeholder при фокусе?

css

Скрываем placeholder красиво

css

Стилизация HTML5 плейсхолдера с помощью CSS / Хабр

Список поддерживаемых CSS стилей для атрибута placeholder:

Стилизуем Placeholder с помощью CSS

Префиксы

Псевдоэлемент против псевдокласса

Непрозрачность Placeholder в Firefox по умолчанию

CSS-обработка неверных селекторов

Поддерживаемые стили

Проблемы доступности

Автоматически добавлять Vendor-префиксы

Псевдоэлемент ::placeholder | CSS | WebReference

Синтаксис

Обозначения

Пример

Примечание

Браузеры

Автор и редакторы

::placeholder — Веб-технологии для разработчиков

Синтаксис

Примеры

Красный текст

HTML

CSS

Результат

Зелёный текст

HTML

CSS

Результат

Проблемы доступности

Цветовой контраст

Контрастность

Использование

Режим высокой контрастности Windows

Метки

Спецификации

Совместимость с браузерами

Легенда

Смотрите также

Стилизация placeholder на чистом CSS

Как скрыть placeholder при клике по полю

Стилизация placeholder в CSS — Блог о веб-разработке

Цвет заполнителя — Tailwind CSS

html — стиль текста заполнителя Ionic 2

Шаблоны стилей с помощью CSS. Синтаксис, советы и рекомендации, поддерживаемые стили HTML5 — Frontend Babel

: показан заполнитель — веб-технологии для разработчиков

Рубрики

Рубрики