input :before или :after | CSS

• input и :before
• input и :after
• Выделение строки с активным полем input в форме
• :focus для input
• Красивая, удобная и вместе с тем простая форма входа
• Куча примеров с <input type="checkbox"/>
• Интересные эффекты, когда человек пропустил обязательное поле и нажал "готово", а программа обращает его внимание на досадную оплошность, заранее сделав менее выразительными верно заполненные пункты, можно увидеть на tympanus.net

Для 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

email телефон

<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>