Eu sei que existe uma pseudoclasse CSS3 oficial :checked
, mas existe uma :unchecked
pseudoclasse e elas têm o mesmo suporte para navegador?
A referência do Sitepoint não menciona nenhum, no entanto, esta especificação whatwg (seja lá o que for) faz.
Eu sei que o mesmo resultado pode ser alcançado quando os :checked
e :not()
pseudo-classes são combinados, mas eu ainda estou curioso:
input[type="checkbox"]:not(:checked) {
/* styles */
}
Editar:
O w3c recomenda a mesma técnica
Uma caixa de seleção desmarcada pode ser selecionada usando a pseudoclasse de negação:
:not(:checked)
fonte
Acho que você está tentando complicar as coisas. Uma solução simples é estilizar sua caixa de seleção por padrão com os estilos desmarcados e, em seguida, adicionar os estilos de estado marcados.
Peço desculpas por trazer um tópico antigo, mas senti que poderia ter usado uma resposta melhor.
EDITAR (03/03/2016):
As especificações do W3C afirmam isso
:not(:checked)
como exemplo para selecionar o estado não verificado. No entanto, este é explicitamente o estado não verificado e só aplicará esses estilos ao estado não verificado. Isso é útil para adicionar um estilo que só é necessário no estado desmarcado e precisaria ser removido do estado marcado se usado noinput[type="checkbox"]
seletor. Veja o exemplo abaixo para esclarecimentos.Sem usar
:not(:checked)
no exemplo acima, o:checked
seletor teria que usar umborder: none;
para obter o mesmo efeito.Use o
input[type="checkbox"]
para o estilo de base para reduzir a duplicação.Use
input[type="checkbox"]:not(:checked)
para estilos desmarcados explícitos que você não deseja aplicar ao estado marcado.fonte
:not(:checked)
:first-child
,:last-child
ou:nth-child
seletor em combinação com:checked
.:not(:checked)
não cobrirá a situação que você especificou, a menos que eu esteja interpretando mal seu comentário.Não há pseudoclasse: desmarcada, entretanto, se você usar a pseudoclasse: check e o seletor irmão, poderá diferenciar os dois estados. Acredito que todos os navegadores mais recentes suportam a: pseudo classe marcada, você pode encontrar mais informações neste recurso: http://www.whatstyle.net/articles/18/pretty_form_controls_with_css
Você terá um melhor suporte ao navegador com jquery ... você pode usar uma função de clique para detectar quando o clique acontece e se está marcado ou não, então você pode adicionar uma classe ou remover uma classe conforme necessário ...
fonte
A maneira como lidei com isso foi trocando o className de um rótulo com base em uma condição. Desta forma, você só precisa de uma etiqueta e pode ter diferentes classes para diferentes estados ... Espero que ajude!
fonte