Загалом :checked застосовується таким чином (приклад 1).
Приклад 1. Використання :checked
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:checked</title> <style> :checked { border: 2px solid red; /* Параметри рамки */
color: #fff; /* Колір тексту */
background: #333; /* Колір тла */
}
</style>
</head>
<body> <p><input type="radio" name="yesno" checked> Так <input type="radio" name="yesno"> Ні</p> <p><input type="checkbox" checked> Згоден</p> <p><select> <option>Леонардо</option> <option>Рафаель</option> <option>Донателло</option> <option>Мікеланджело</option>
</select></p>
</body>
</html>У цьому прикладі є прапорець, перемикач і список <select>. Псевдоклас :checked вказаний без селектора попереду, тому буде застосовуватися до всіх можливих елементів.
Самі поля форм погано стилізуються, зокрема Chrome змінюється лише колір тексту і тла у <option> (рис. 1а), Firefox взагалі ніяк не змінює стиль елементів (рис. 1б).
 |  |
| a. Chrome | б. Firefox |
Мал. 1. Поля форм у браузері
Щоб якось активно використовувати :checked йдуть на хитрість і стилізують не сам < input>, а елемент <label>. Для цього відразу після <input> вставляємо <label> і зв'язуємо ці два елементи за допомогою однакового значення у атрибутів id та for (приклад 2).
Приклад 2. Використання <label> ;
<input type="checkbox" id="switch" checked> <label for="switch">Прапорець</label>
Оскільки ми пов'язали між собою ці елементи, то можна клацати вже за текстом і прапорець буде включатися або вимикатися. Тепер <input> та <label> є суміжними елементами, так що в стилях їх теж можна зв'язати між собою.
input[type="checkbox"]:checked + label { … }Тут стильові параметри застосовуються до елемента <label>, який йде відразу після елемента <input type="checkbox">, і для якого увімкнено прапорець . У прикладі 3 показано використання :checked для зміни кольору тексту.
Приклад 3. Суміжні селектори
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:checked</title> <style> [type="checkbox"]:checked + label { color: red; /* Червоний колір тексту */
}
</style>
</head>
<body> <p><input type="checkbox" id="switch" checked> <label for="switch">Прапорець</label></p>
</body>
</html>Результат цього прикладу показаний на рис. 2.
Мал. 2. Стилізація <label>