Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

CSS псевдо-класс :placeholder-shown представляет любой <input> или <textarea> элемент, который отображает в данный момент текст заполнитель (плейсхолдер).
/* Выбирает любой элемент с активным плейсхолдером */
:placeholder-shown {
  border: 2px solid silver;
}

Синтаксис

:placeholder-shown

Примеры

Простой пример

HTML

<input placeholder="Type something here!">

CSS

input {
  border: 2px solid black;
  padding: 3px;
}

input:placeholder-shown {
  border-color: silver;
}

Результат

Переполнение текстом

На узких экранах, таких как смартфоны, ширина полей поиска и других полей формы может быть значительно сокращена. Это может привести к нежелательному обрезанию текста плейсхолдера. Часто бывает полезно изменить это поведение с помощью свойства text-overflow.

HTML

<input placeholder="Enter something into this field, if you please!">

CSS

input:placeholder-shown {
  text-overflow: ellipsis;
}

Результат

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

HTML

<input placeholder="Type something here!">

CSS

input:placeholder-shown {
  color: red;
  font-style: italic;
}

Результат

Кастомизированное поле ввода

В следующем примере выделены поля Branch и ID с пользовательским стилем.

HTML

<form id="test"> 
  <p>
    <label for="name">Enter Student Name:</label>
    <input id="name" placeholder="Student Name"/>
  </p>
  <p>
    <label for="branch">Enter Student Branch:</label>
    <input id="branch" placeholder="Student Branch"/>
  </p>
  <p>
    <label for="sid">Enter Student ID:</label>
    <input type="number" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id"/>
  </p>
  <input type="submit"/>
</form>

CSS

input {
  background-color: #E8E8E8;
  color: black;
}

input.studentid:placeholder-shown {
  background-color: yellow;
  color: red;
  font-style: italic;
}

Результат

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

Specification Status Comment
Selectors Level 4
Определение ':placeholder-shown' в этой спецификации.
Рабочий черновик Initial definition.

Браузерная совместимость

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
:placeholder-shown
Экспериментальная
Chrome Полная поддержка 47Edge Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This feature is not implemented. See this enhancement request.
Firefox Полная поддержка 51
Полная поддержка 51
Нет поддержки 4 — 51
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :-moz-placeholder
IE Полная поддержка 10
Альтернативное имя
Полная поддержка 10
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :-ms-input-placeholder
Opera Полная поддержка 34Safari Полная поддержка 9WebView Android Полная поддержка 51Chrome Android Полная поддержка 47Firefox Android Полная поддержка 51
Полная поддержка 51
Нет поддержки 4 — 51
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :-moz-placeholder
Opera Android Полная поддержка ДаSafari iOS Полная поддержка 9.2Samsung Internet Android Полная поддержка 5.0
Support on non-type="text" elements (such as type="number" or type="time")
Экспериментальная
Chrome Полная поддержка 47Edge Нет поддержки НетFirefox Полная поддержка 51IE Нет поддержки НетOpera Полная поддержка 34Safari Полная поддержка 9WebView Android Полная поддержка 47Chrome Android Полная поддержка 47Firefox Android Полная поддержка 51Opera Android Полная поддержка 34Safari iOS Полная поддержка 9Samsung Internet Android Полная поддержка 5.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Смотрите замечания реализации.
Смотрите замечания реализации.
Использует нестандартное имя.
Использует нестандартное имя.

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

Метки документа и участники

Внесли вклад в эту страницу: mdnwebdocs-bot, aleshkanet, sweetsmith, Hydrock
Обновлялась последний раз: mdnwebdocs-bot,