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

Синтаксис

{{csssyntax}}

Примеры

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

HTML

<input placeholder="Type something here!">

CSS

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

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

Результат

{{EmbedLiveSample("Простой_пример", 200, 60)}}

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

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

HTML

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

CSS

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

Результат

{{EmbedLiveSample("Переполнение_текстом", 200, 60)}}

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

HTML

<input placeholder="Type something here!">

CSS

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

Результат

{{EmbedLiveSample("Цветной_текст", 200, 60)}}

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

В следующем примере выделены поля 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;
}

Результат

{{EmbedLiveSample("Кастомизированное_поле_ввода", 200, 180)}}

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

Спецификация Статус Комментарий
{{SpecName("CSS4 Selectors", "#placeholder", ":placeholder-shown")}} {{Spec2("CSS4 Selectors")}} Initial definition.

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

{{Compat("css.selectors.placeholder-shown")}}

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