:placeholder-shown

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

CSS псевдокласс :placeholder-shown представляет любой <input> или <textarea> элемент, который отображает в данный момент текст заполнитель (плейсхолдер).

css
/* Выбирает любой элемент с активным плейсхолдером */
:placeholder-shown {
  border: 2px solid silver;
}

Синтаксис

Error: could not find syntax for this item

Примеры

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

HTML

html
<input placeholder="Type something here!" />

CSS

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

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

Результат

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

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

HTML

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

CSS

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

Результат

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

HTML

html
<input placeholder="Type something here!" />

CSS

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

Результат

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

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

HTML

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

css
input {
  background-color: #e8e8e8;
  color: black;
}

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

Результат

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

Specification
HTML
# selector-placeholder-shown
Selectors Level 4
# placeholder-shown-pseudo

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:placeholder-shown
Support on non-type="text" elements (such as type="number" or type="time")

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Has more compatibility info.

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