:placeholder-shown

Псевдоклас CSS :placeholder-shown (показано заповнювач) представляє будь-який елемент <input> або <textarea>, який наразі показує текст заповнювача.

Спробуйте його в дії

Синтаксис

:placeholder-shown {
  /* ... */
}

Приклади

Базовий приклад

Цей приклад застосовує особливі стилі шрифту та меж, коли показано заповнювач.

HTML

<input placeholder="Надрукуйте тут щось!" />

CSS

input {
  border: 1px solid black;
  padding: 3px;
}

input:placeholder-shown {
  border-color: teal;
  color: purple;
  font-style: italic;
}

Результат

Переповнення текстом

Коли поля форми замалі, текст заповнювача може обрізатися в небажаний спосіб. Можна вжити властивість text-overflow, щоб змінити спосіб відображення тексту, що перелився через край.

HTML

<input id="input1" placeholder="Ім'я, ранг та серійний номер" /> <br /><br />
<input id="input2" placeholder="Ім'я, ранг та серійний номер" />

CSS

#input2:placeholder-shown {
  text-overflow: ellipsis;
}

Результат

Підлаштоване поле введення

Наступний приклад виділяє картку студентського квитка особливим стилем.

HTML

<form id="test">
  <p>
    <label for="name">Уведіть ім'я студента:</label>
    <input id="name" placeholder="Ім'я студента" />
  </p>
  <p>
    <label for="branch">Уведіть факультет студента:</label>
    <input id="branch" placeholder="Факультет студента" />
  </p>
  <p>
    <label for="sid">Уведіть номер студентського квитка:</label>
    <input
      type="number"
      pattern="[0-9]{8}"
      title="8-цифровий номер"
      id="sid"
      class="studentid"
      placeholder="8-цифровий номер" />
  </p>
  <input type="submit" />
</form>

CSS

input {
  background-color: #e8e8e8;
  color: black;
}

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

Результат

Специфікації

Сумісність із браузерами

Дивіться також

• Псевдоелемент ::placeholder оформлює сам заповнювач.
• Пов'язані елементи HTML: <input>, <textarea>
• Форми HTML