: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>
элемент, который отображает в данный момент текст заполнитель (плейсхолдер).
/* Выбирает любой элемент с активным плейсхолдером */
:placeholder-shown {
border: 2px solid silver;
}
Синтаксис
Error: could not find syntax for this item
Примеры
Простой пример
HTML
<input placeholder="Type something here!" />
CSS
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:placeholder-shown {
text-overflow: ellipsis;
}
Результат
Цветной текст
HTML
<input placeholder="Type something here!" />
CSS
input:placeholder-shown {
color: red;
font-style: italic;
}
Результат
Кастомизированное поле ввода
В следующем примере выделены поля 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;
}
Результат
Спецификации
Specification |
---|
Selectors Level 4 # placeholder |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Псевдоэлемент
::placeholder
, применяющий стили к самому себе. - Связанные HTML-элементы:
<input>
,<textarea>
- HTML формы