: verificado - CSS-Tricks

Anonim

A :checkedpseudoclasse 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 :checkedseletor 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 :checkedpseudo-classe para tornar os formulários mais acessíveis. A :checkedpseudo-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