:checked

A pseudo-classe :checked de um seletor CSS representa um elemento radio (<input type="radio">), checkbox (<input type="checkbox">) ou option (<option> em um <select>)  que está marcada ou alternado para um estado ligado. O usuário pode mudar seu estado clicando no elemento, ou selecionando um valor diferente, nesse caso a pseudo-classe :checked não se aplica a esse elemento, mas vai para um elemento relevante.

Sintaxe

input:checked {
  margin-left: 25px;
  border: 1px solid blue;
}

Sintaxe formal

elemento:checked { estilos de propriedades }

Exemplos

Exemplo de seletores

/* qualquer elemento "checkable" */
:checked {
  width: 50px;
  height: 50px;
}

/* qualquer elemento radio */
input[type="radio"]:checked {
  margin-left: 25px;
}

/* apenas elementos checkbox */
input[type="checkbox"]:checked {
  display: none;
}

/* apenas elementos option */
option:checked {
  color: red;
}
input[type="radio"]:checked
Representa todos os botões de rádio na página que estão ativos
input[type="checkbox"]:checked
Representa todos os checkboxes na página que estão ativos
option:checked
Representa todos os selects na página que estão selecionados

Usando checkboxes escodindos para amarzenar algum valor booleano.

A pseudo-classe :checked aplicada em checkboxes escondidos, adicionado ao início de sua página pode
ser aplicada de forma a armazenar algum booleano dinâmico para ser usado por uma regra CSS. O exemplo a seguir mostra como exibir/esconder um elemento expansível com um simples clique em um botão (download esse demo).

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Elementos expansíveis</title>
<style type="text/css">
#expand-btn {
    margin: 0 3px;
    display: inline-block;
    font: 12px / 13px "Lucida Grande", sans-serif;
    text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
    padding: 3px 6px;
    border: 1px solid rgba(0, 0, 0, 0.6);
    background-color: #969696;
    cursor: default;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
    box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
}

#isexpanded:checked ~ #expand-btn, #isexpanded:checked ~ * #expand-btn {
    background: #B5B5B5;
    -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
    -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
    box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
}

#isexpanded, .expandable {
    display: none;
}

#isexpanded:checked ~ * tr.expandable {
    display: table-row;
    background: #cccccc;

}

#isexpanded:checked ~ p.expandable, #isexpanded:checked ~ * p.expandable {
    display: block;
    background: #cccccc;
}
</style>
</head>
<body>

<input type="checkbox" id="isexpanded" />

<h1>Elementos expansíveis</h1>
<table>
    <thead>
        <tr><th>Coluna #1</th><th>Coluna #2</th><th>Coluna #3</th></tr>
    </thead>
    <tbody>
        <tr class="expandable"><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
        <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
        <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
        <tr class="expandable"><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
        <tr class="expandable"><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
    </tbody>
</table>

<p>[some sample text]</p>
<p><label for="isexpanded" id="expand-btn">Mostra ou esconder elemntos</label></p>
<p class="expandable">[outra amostra de texto]</p>
<p>[alguma amostra de texto]</p>
</body>
</html>

Usando radioboxes escondidos para armazenar algum valor CSS booleano

Você também pode usar a pseudo-classe :checked aplicada a um radioboxe escondido afim de construir, por exemplo, uma galeria de imagem onde as imagens apenas sejam exibidas no tamanho cheio com o clique do mouse em visualizar. Veja essa demonstração como uma dica.

Nota: Para um efeito análogo, mas baseada na pseudo-classe :hover sem radioboxes escondidos, veja essa demostração, tomadas a partir de uma página :hover.

Especificações

Especificação Estatus Comentários
HTML Living Standard
The definition of ':checked' in that specification.		 Padrão em tempo real Sem mudanças.
HTML5
The definition of ':checked' in that specification.		 Recomendação Define a semântica sobre o HTML.
Selectors Level 4
The definition of ':checked' in that specification.		 Rascunho atual Sem mudanças.
CSS Basic User Interface Module Level 3
The definition of ':checked' in that specification.		 Recomendação Link para Seletores nível 3
Selectors Level 3
The definition of ':checked' in that specification.		 Recomendação Define a pseudo-classe, mas não associação semântica

Compatibilidade de navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suporte básico 1.0 1.0 (1.7 or earlier) 9.0 9.0 3.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte básico 2.1 1.0 (1.0) 9.0 9.5 3.1