Перейти к содержанию

:placeholder-shown

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

Такая подсказка обычно исчезает при наборе текста.

Псевдоклассы

Синтаксис

1
2
3
4
/* Выбирает любой элемент с активным плейсхолдером */
:placeholder-shown {
    border: 2px solid silver;
}

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

Примеры

Пример 1

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

1
2
3
4
5
6
7
8
input {
  border: 2px solid black;
  padding: 3px;
}

input:placeholder-shown {
  border-color: silver;
}

Пример 2

В следующем примере выделены поля Branch и ID с пользовательским стилем.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
input {
  background-color: #e8e8e8;
  color: black;
}

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

Пример 3

В данном примере пустое поле отображается с красной рамкой, при вводе текста рамка меняет цвет на зелёный.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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>

См. также

Ссылки

Комментарии