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

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 для AndroidEdge MobileFirefox для 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 ? Edge Mobile Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания This feature is not implemented. See this enhancement request.
Firefox Android Полная поддержка 51
Полная поддержка 51
Нет поддержки 4 — 51
Альтернативное имя
Альтернативное имя Использует нестандартное имя: :-moz-placeholder
Opera Android ? Safari iOS Полная поддержка 9.2Samsung Internet Android ?
Support on non-type="text" elements (such as type="number" or type="time")
Экспериментальная
Chrome ? Edge Нет поддержки НетFirefox Полная поддержка ДаIE Нет поддержки НетOpera ? Safari Полная поддержка ДаWebView Android ? Chrome Android ? Edge Mobile Нет поддержки НетFirefox Android Полная поддержка ДаOpera Android ? Safari iOS Полная поддержка ДаSamsung Internet Android ?

Легенда

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

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

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

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