Pseudo-classe :checked do CSS3

Definição e uso

CSS :checked Pseudo-classes usadas para combinar qualquer elemento selecionado <input> ou <option> Elemento.

Isso se aplica a <input type="radio">, <input type="checkbox"> e <select> elementos de <option>.

Exemplo

Exemplo 1

Defina uma linha fina vermelha para todos os elementos <input> selecionados:

input:checked {
  outline: 1px sólido vermelho;
}

Experimente você mesmo

Exemplo 2

Defina estilos diferentes para botões de rádio, caixas de seleção e opções quando estiverem selecionados:

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

Experimente você mesmo

Sintaxe CSS

:checked {
  declarações css;
}

Detalhes técnicos

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente esse pseudo-classe.