Puro CSS3 embeleza os botões de rádio

Pequeno · Publicado em 16/05/2019 11:10:41

Esse método puro CSS3 de embelezar os botões de rádio funciona bem nas seguintes situações:

1. Pode ser compatível com IE9 e superiores, e se precisar ser compatível com IE8, escreva o hack do IE para remover o estilo

2. Apenas rádio com botão de rádio é suportado, porque o círculo do estilo de seleção do botão de rádio pode ser feito com CSS, mas a caixa de seleção do botão de seleção requer uma biblioteca de fontes de imagem ou ícone

3. Não é necessário JS para suportar efeitos de comutação

A imagem abaixo é a renderização final:

Código HTML:

O login está visível.

Código CSS:

O login está visível.

O mais importante nesse método é selecionar o nome da classe do efeito: .radio input:checked + span.radio-on

+ é uma pseudoclasse de CSS2, o que significa que div+p seleciona <div> todos os elementos imediatamente após o <p> elemento .

Ou seja, encontre a entrada selecionada (:checked) e então use o elemento span chamado radio-on para fazer o efeito círculo selecionado.

Existem muitos métodos de embelezamento na Internet para fazer o rótulo em círculo, mas nesse caso, o texto de seleção única deve ser colocado fora do rótulo, o que leva ao fato de que, ao clicar no texto, o efeito de seleção única não pode ser trocado.

Então adicionei um vão chamado radio-bg ao rótulo para fazer o círculo grande atrás, e depois usei um vão chamado radio-on para fazer o círculo pequeno na frente da seleção.

Dessa forma, o texto no rótulo é preservado, e o efeito de uma única seleção também pode ser alternado.

Anexado: o jQuery assume o método de valor do rádio selecionado

var val=$('entrada:Rádio[nome="sexo"]:verificado').val();

Anexe os três métodos:

$('entrada:rádio:checked').val();

$("input[type='radio']:checked").val();

$("input[name='rd']:checked").val();

[CSS/DIV] Puro CSS3 embeleza os botões de rádio

Posts Relacionados

Seções visualizadas