A :checked
pseudoclasse em CSS seleciona elementos quando eles estão no estado selecionado. Ele está associado apenas a elementos input ( ) do tipo rádio e caixa de seleção. O
:checked
seletor de pseudo classe combina os tipos de entrada de rádio e caixa de seleção quando marcado ou alternado para um estado ligado. Se eles não estiverem selecionados ou marcados, não há correspondência.
Portanto, quando uma caixa de seleção é marcada e você está direcionando o rótulo imediatamente após:
input(type=checkbox) + label ( color: #ccc; font-style: italic; ) input(type=checkbox):checked + label ( color: #f00; font-style: normal; )
O texto do rótulo mudará de cinza itálico para fonte normal vermelha.
CSS is Awesome
CSS é incrível
O exemplo acima é um exemplo de uso da :checked
pseudo-classe para tornar os formulários mais acessíveis. A :checked
pseudo-classe pode ser usada com entradas ocultas e seus rótulos visíveis para construir widgets interativos, como galerias de imagens.
Mais recursos
- O hack da caixa de seleção
- MDN Docs em: verificado
- As especificações W3C em: verificado
Suporte para navegador
cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
---|---|---|---|---|---|---|
Nenhum | 3.1+ | Nenhum | 9+ | 9+ | nenhum | nenhum |