:placeholder-shown

Базовая Широко доступная

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

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

Попробовать

Синтаксис

:placeholder-shown {
  /* ... */
}

Примеры

Базовый пример

В этом примере применяются специальные стили шрифта и границы, когда отображается текст подсказки.

HTML

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

CSS

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

input:placeholder-shown {
  border-color: teal;
  color: purple;
  font-style: italic;
}

Результат

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

Когда поля формы слишком маленькие, текст подсказки может обрезаться нежелательным образом. Вы можете использовать свойство text-overflow, чтобы изменить способ отображения переполненного текста.

HTML

<input id="input1" placeholder="Name, Rank, and Serial Number" /> <br /><br />
<input id="input2" placeholder="Name, Rank, and Serial Number" />

CSS

#input2:placeholder-shown {
  text-overflow: ellipsis;
}

Результат

Настройка поля ввода

Следующий пример выделяет поле «Идентификатор студента» с пользовательским стилем.

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="student-id"
      placeholder="8 digit id" />
  </p>
  <input type="submit" />
</form>

CSS

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

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

Результат

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

Спецификация
Selectors Level 4 # placeholder

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`:placeholder-shown`	47	79	514–51	34	9	47	514–51	34	9	5.0	47
`non_text_types`	47	79	59	34	9	47	59	34	9	5.0	47

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown