This page was translated from English by the community.Learn more and join the MDN Web Docs community.
: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> элемент, который отображает в данный моменттекст заполнитель (плейсхолдер).
/* Выбирает любой элемент с активным плейсхолдером */:placeholder-shown { border: 2px solid silver;}Синтаксис
Error: could not find syntax for this itemПримеры
Простой пример
HTML
<input placeholder="Type something here!" />CSS
input:-ms-input-placeholder { border-color: silver;}input:-moz-placeholder { border-color: silver;}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:-ms-input-placeholder { text-overflow: ellipsis;}input:-moz-placeholder { text-overflow: ellipsis;}input:placeholder-shown { text-overflow: ellipsis;}Результат
Цветной текст
HTML
<input placeholder="Type something here!" />CSS
input:-ms-input-placeholder { color: red; font-style: italic;}input:-moz-placeholder { color: red; font-style: italic;}input:placeholder-shown { color: red; font-style: italic;}Результат
Кастомизированное поле ввода
В следующем примере выделены поля Branch и ID с пользовательским стилем.
HTML
<form> <p> <label for="name">Enter Student Name:</label> <input placeholder="Student Name" /> </p> <p> <label for="branch">Enter Student Branch:</label> <input placeholder="Student Branch" /> </p> <p> <label for="sid">Enter Student ID:</label> <input type="number" pattern="[0-9]{8}" title="8 digit ID" 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;}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 формы