Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
:checked
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 2015.
Apseudo-classe:checked de um seletor CSS representa um elementoradio (<input type="radio">),checkbox (<input type="checkbox">) ouoption (<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"]:checkedRepresenta todos os botões de rádio na página que estão ativos
input[type="checkbox"]:checkedRepresenta todos os checkboxes na página que estão ativos
option:checkedRepresenta todos os selects na página que estão selecionados
Usando checkboxes escodindos para armazenar algum valor booleano
A pseudo-classe:checked aplicada em checkboxes escondidos, adicionado ao início de sua página podeser 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).
#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;}<input type="checkbox" /><h1>Elementos expansíveis</h1><table> <thead> <tr><th>Coluna #1</th><th>Coluna #2</th><th>Coluna #3</th></tr> </thead> <tbody> <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><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> </tbody></table><p>[some sample text]</p><p><label for="isexpanded">Mostra ou esconder elementos</label></p><p>[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:checkedaplicada a um radioboxe escondido afim de construir, por exemplo, umagaleria de imagem onde as imagens apenas sejam exibidas no tamanho cheio com o clique do mouse em visualizar. Vejaessa demonstração como uma dica.
Nota:Para um efeito análogo, mas baseada na pseudo-classe:hover sem radioboxes escondidos, vejaessa demostração, tomadas a partir de uma página:hover.
Especificações
| Specification |
|---|
| HTML # selector-checked |
| Selectors Level 4 # checked-pseudo |