псевдо-класс :checked в CSS3

определение и использование

CSS :checked псевдо-классы используются для соответствия любому выбранному <input> или <option> .

Это применяется к элементам <input type="radio">, <input type="checkbox"> и <select> с элементами <option>.

пример

пример 1

установить тонкую красную обводку для всех выбранных элементов <input>:

input:checked {
  outline: 1px solid red;
}

попробуйте сами

пример 2

установить различные стили для радио-кнопок, флажков и вариантов при их选中:

input[type="radio"]:checked {
  box-shadow: 0 0 5px 3px blue;
}
input[type="checkbox"]:checked {
  box-shadow: 0 0 5px 3px maroon;
}
option:checked {
  color: blue;
  background-color: pink;
}

попробуйте сами

CSS грамматика

:checked {
  css declarations;
}

Технические детали

Поддержка браузеров

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот псевдо-класс.