Содержание

Стилизуем 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-а происходит по-разному.

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

Мне больше нравится первый вариант. Для того, чтобы задать такое поведение во всех браузерах, поддерживающих 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

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

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

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

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

Автоматически добавлять 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.

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

Рис. 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
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
::placeholderChrome Полная поддержка 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

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. работы Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании
.

Шаблоны стилей с помощью 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;}  

Скрытие заполнителя несовместимо в разных браузерах.

  1. В некоторых браузерах это происходит, когда поле ввода сфокусировано
  2. В других браузерах это происходит только после ввода хотя бы одного символа

Мне первый вариант нравится. Чтобы реализовать это поведение во всех браузерах, поддерживающих заполнители, определите следующие правила 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 представляет любой элемент или