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.
: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
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 |