:placeholder-shown¶
Псевдокласс :placeholder-shown
определяет стиль элемента <input>
или <textarea>
, который в данный момент отображает текст подсказки, заданной атрибутом placeholder
. Такая подсказка обычно исчезает при наборе текста.
Псевдоклассы
- :active
- :any-link
- :blank
- :checked
- :current()
- :default
- :defined
- :dir()
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :future
- :has()
- :host
- :host()
- :host-context()
- :hover
- :indeterminate
- :in-range
- :invalid
- :is()
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :local-link
- :not()
- :nth-child()
- :nth-col()
- :nth-last-child()
- :nth-last-col()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :past
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :target
- :target-within
- :user-invalid
- :valid
- :visited
- :where()
Синтаксис¶
/* Выбирает любой элемент с активным плейсхолдером */
:placeholder-shown {
border: 2px solid silver;
}
Спецификация¶
Примеры¶
Пример 1¶
<input placeholder="Type something here!" />
input {
border: 2px solid black;
padding: 3px;
}
input:placeholder-shown {
border-color: silver;
}
Пример 2¶
В следующем примере выделены поля Branch и ID с пользовательским стилем.
<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>
input {
background-color: #e8e8e8;
color: black;
}
input.studentid:placeholder-shown {
background-color: yellow;
color: red;
font-style: italic;
}
Пример 3¶
В данном примере пустое поле отображается с красной рамкой, при вводе текста рамка меняет цвет на зелёный.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>:placeholder-shown</title>
<style>
input {
border: 1px solid green; /* Зелёная рамка */
}
input:placeholder-shown {
border-color: red; /* Красная рамка */
}
</style>
</head>
<body>
<form action="/example/handler.php">
<input type="text" name="login" placeholder="Логин" />
<input
type="password"
name="pass"
placeholder="Пароль"
/>
</form>
</body>
</html>
См. также¶
Ссылки¶
- Псевдо-класс
:placeholder-shown
MDN (рус.)