Como fazer um Radio Button perfeito apenas com HTML e CSS
O HTML nos proporciona uma infinidade de ferramentas para lidarmos com a parte visual porém muitas vezes ele não oferece suporte para estilizarmos nossos componentes como gostaríamos e muitas vezes usamos bibliotecas inteiras para usar apenas alguns componentes que gostamos deixando nosso build mais pesado.
Utilizaremos então as famosas gambiarras de CSS para estilizar nosso radio buttons.
Vamos começar com o nosso HTML
primeiro colocamos o nosso radio button na tela
o que vai produzir o seguinte resultado
Bem feio ne? Agora vamos estilizar, vamos adicionar um Label que corresponde ao input
Esse label vai servir como a nossa referência visual e o input vai servir apenas para guardar os valores.(Lembrando que é muito importante deixar nesta ordem).
vamos esconder nosso input então com css.
O position:absolute é muito importante para o input não ocupar espaço na tela.
E para o nosso label
é muito importante trocar nosso display para flex ou block. O label vem como default com display-inline, o que faz com que não tenha como estlizar os filhos dele.
Agora vamos fazer nosso input dentro do label
estilizando nossa classe .radio-btn
obteremos o seguinte resultado
Agora que vem o pulo do gato!
Usaremos um seletor bem incomum no dia a dia do desenvolvedor. Oseletor +(sinal de mais). esse seletor permite estilizar o elemento especificado logo após o elemento declarado
o css possui um seletor que vem junto com os inputs radio que é o :checked.
Podemos então usar ambos os seletores da seguinte forma
lembrando que a ordem dos elementos do HTML é muito importante ser mantida
E então…
com o seguinte código
chegamos ao seguinte resultado
