: Заполнитель-показано онлайн урок.


Под псевдонимом: placeholder-выбираетсясам входной элемент, когда текст-заполнитель существует во вводе формы. Подумайте об этом как о хорошем способе различать входы, которыев настоящее время отображают текст-заполнитель

input:placeholder-shown {
border: 5px solid red;
}

# Идея заполнителей

Текстовый& lt; input & gt;s и& lt; textarea & gt; Входможет содержать текст заполнителя. Это текст, который отображается, когда вход пуст, чтобы предложить возможное значение. Например, в форме, запрашивающей школу, может быть ярлык для того, что она просит, но затем предложите «пример средней школы лесных холмов» в качестве заполнителя в качестве примерного значения:

<code><label for="school">School Name:</label>
<input placeholder="Forest Hills Example High School" type="text" name="school" id="school">

# Разница между: placeholder-показанным и:: placeholder

: показателем-заполнителемявляется выбор самого входа, когда отображается текст-заполнитель. В отличие от:: placeholder, который стилирует текст заполнителя.

Вот диаграмма:

Я нашел это очень запутанным, поскольку

  1. спецификации имеют только: placeholder-показанный, а не:: placeholder
  2. : placeholder-shownвсе равно может повлиять на стиль текста-заполнителя, поскольку это родительский элемент (например, размер шрифта).

Обратите внимание, что: placeholder-показанныйявляется псевдо-классом(это элемент в определенном состоянии), а:: placeholderявляется псевдо-элементом(видимая вещь, которая на самом деле не находится в DOM). Различаются двойными двоеточиями.

Tab Аткинс очистил его для меня по электронной почте:

: placeholder-показанный, будучи псевдоклассом, должен выбрать существующий элемент - он выбирает ввод всякий раз, когда вы находитесь в состоянии, отображающем место. Псевдоэлемент:: placeholder обертывает фактический текст заполнителя.

# Если вам нужно стилизовать текст заполнителя

Использовать:: placeholder(на самом деле использовать все сумасшедшие префиксы поставщика для него), которые мы подробно описали в Альманахе здесь .

#Дополнительная информация

  • Селекторы Уровень 4 Спец
  • Могу ли я использовать?