input :before или :after | CSS

Google-Translate to English

Для input нельзя задать :before или :after [w3.org]. Но унывать нет причины, будет изворачиваться, чтобы жизнь пользователя сделать комфортнее.

Внутри input появляется символ галки, если поле заполнено верно



<form>
  <input type="email" placeholder="email" id="before" required><label for="before">&nbsp;</label>
</form>

input, label слева и :focus



<form id="after"><input type="email" placeholder="email" id="email" required><label for="email" data-fon="✉" data-text="email">&nbsp;</label>
  <input type="tel" pattern="\(\d\d\d\) ?\d\d\d-\d\d-\d\d" placeholder="(###) ###-##-##" id="tel" required><label for="tel" data-fon="☎" data-text="телефон">&nbsp;</label>
</form>

Выделить строку при фокусе input


<form id="line">
  <input type="email" placeholder="email" id="raz" required><label for="raz">email</label>
  <input type="tel" pattern="\(\d\d\d\) ?\d\d\d-\d\d-\d\d" placeholder="(###) ###-##-##" id="dva" required><label for="dva">телефон</label>
</form>
в f t
наверх ↑

Комментариев нет:

.