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.