Destaque visualmente os rádios e caixas de seleção selecionados

Percebo que a maioria dos dispositivos habilitados para toque (e navegadores de desktop mais recentes) fazem uma coisa boa com a caixa de seleção e os elementos de formulário de rádio – quando marcados com uma etiqueta envolvente, toda a etiqueta se torna tocável / clicável, tornando muito mais fácil selecionar itens em uma lista de caixas de seleção ou botões de opção.

Isso é bom, mas o que eu não gostei foram os -webkitchiqueiros padrão para :checkedcaixas de seleção e elementos de rádio – muito sutis na minha opinião. Também fiquei frustrado com a falta de opções de estilo disponíveis para esses elementos por meio de CSS.

Em vez disso, decidi definir o estilo dos próprios rótulos, tornando mais claro quais foram selecionados. Isso tem a vantagem de ser um bom visual para usuários de desktop também.

O Javascript

/* 
* Add a class to the selected radio/checkbox parent label

* Requires inputs to be nested in labels:

* <label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox">Choice B</label>

* <label for="radio1"><input id="radio1" name="radio" type="radio" checked="checked">Option 1</label>

*/

$
('input:radio').click(function() {
$
('label:has(input:radio:checked)').addClass('active');
$
('label:has(input:radio:not(:checked))').removeClass('active');
});
$
('input:checkbox').click(function() {
$
('label:has(input:checkbox:checked)').addClass('active');
$
('label:has(input:checkbox:not(:checked))').removeClass('active');
});
/* Loop through them on initial page load as well */
$
('input:radio').each(function() {
$
('label:has(input:radio:checked)').addClass('active');
});
$
('input:checkbox').each(function() {
$
('label:has(input:checkbox:checked)').addClass('active');
});

Bônus

Aqui está um link para um JSFiddle com um estilo básico definido . Brinque com ele para ver o efeito e use-o como desejar.