Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
CSS псевдо-класс
:placeholder-shown
представляет любой <input>
или <textarea>
элемент, который отображает в данный момент текст заполнитель (плейсхолдер)./* Выбирает любой элемент с активным плейсхолдером */
:placeholder-shown {
border: 2px solid silver;
}
Синтаксис
:placeholder-shown
Примеры
Простой пример
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 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;
}
input {
background-color: #E8E8E8;
color: black;
}
input.studentid:placeholder-shown {
background-color: yellow;
color: red;
font-style: italic;
}
Результат
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
Selectors Level 4 Определение ':placeholder-shown' в этой спецификации. |
Рабочий черновик | Initial definition. |
Совместимость с браузерами
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Смотрите также
- Псевдоэлемент
::placeholder
, применяющий стили к самому себе. - Связянные HTML элементы:
<input>
,<textarea>
- HTML формы