: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 ⁨январь 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

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

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

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

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

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

css

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

Результат

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

HTML

html

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

CSS

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

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

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

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

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

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

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

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

Псевдоэлемент ::placeholder, применяющий стили к самому себе.
Связанные HTML-элементы: <input>, <textarea>
HTML формы

Help improve MDN

Learn how to contribute

This page was last modified on ⁨1 янв. 1970 г.⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content