Однак найбільше псевдокласів використовується для роботи з елементами форми, особливо для input.
:focus – змінює стиль для поля, що отримало фокус (клік всередині поля).
За замовчуванням браузер робить обведення всередині інпуту, що потрапив у фокус. Ми скасовуємо дефолтне обведення і встановлюємо свої стилі.
input:focus {
outline: none;
border: 2px solid green;
}
:checked – застосовується до checkbox і radio елементів форми, коли вони знаходяться у ввімкненому стані.
:empty – представляє пустий елемент, наприклад <span></span>
span:empty {
background: blue;
width: 30px;
height: 30px;
display: block;
}
:invalid – застосовується до полів форми, коли введені користувачем дані не відповідають заданому типу (невалідні дані).
Наприклад, у полі з типом даних tel користувач ввів ім’я, і тоді це поле стане червоним.
<input type="tel" required>
input:invalid {
background: red;
}
:valid – якщо валідація була успішною, то колір поля стане зеленим.
input:valid {
background: green;
}