Como estilizar botões de opção HTML: um guia passo a passo

Os botões de opção HTML são essenciais nos formulários da web, mas sua aparência padrão deixa muito a desejar. Nesta postagem do blog, veremos um dos meus métodos favoritos para personalizar a aparência dos botões de opção usando CSS, criando uma experiência mais amigável e visualmente atraente.

Vamos começar ocultando os botões de opção!

Precisamos começar reconhecendo as limitações do estilo entre navegadores para botões de opção. Embora seja frustrante não podermos estilizá-los diretamente, podemos usar soluções alternativas. Neste exemplo, a primeira etapa é ocultar a entrada real do botão de opção. Eu sei que isso parece estranho, mas sabemos que não podemos estilizá-los, então só precisamos retirá-los da equação.

No entanto, isso deve ser feito de forma acessível, garantindo que permaneça funcional para todos os usuários. Isso pode ser conseguido usando o seguinte conjunto de estilos que ocultam visualmente o conteúdo, mantendo sua usabilidade:

 input[type="radio"] { border: 0 !important; clip: rect(1px, 1px, 1px, 1px); height: 1px !important; overflow: hidden; padding: 0 !important; position: absolute !important; width: 1px !important; }

Criando os botões de opção personalizados

Para criar a aparência personalizada do botão de opção, aproveitaremos o pseudoelemento ::before em nosso rótulo junto com alguns CSS simples para criar a aparência que procuramos.

Para nosso exemplo, o HTML fica assim:

 <form> <h1>Can We Style HTML Radio Buttons?</h1> <ul> <li> <input type="radio" value="yes" name="option" id="yes" /> <label for="yes">Yes</label> </li> <li> <input type="radio" value="no" name="option" id="no" /> <label for="no">No</label> </li> <li> <input type="radio" value="maybe" name="option" id="maybe" /> <label for="maybe">Maybe</label> </li> </ul> </form>

Para começar, adicionaremos os seguintes estilos ao nosso elemento label:

 label { display: inline-flex; align-items: center; }

Isso garantirá que, depois de adicionarmos nossos estilos de botão de opção, eles serão devidamente alinhados verticalmente com o texto do rótulo.

Agora, adicionaremos nossos botões de opção simulados usando o pseudoelemento ::before :

 label::before { content: ''; display: block; height: 1.25em; width: 1.25em; border: solid 1px #ccc; border-radius: 50%; margin-right: 0.5em; }

Neste ponto, temos algo que começa a parecer uma lista de botões de rádio, mas se clicarmos nos rádios, veremos que nada está acontecendo. Embora o pseudoelemento se assemelhe visualmente a um botão de opção, ele carece de interatividade porque ainda não tratamos do estado verificado.

Lidando com interações e estados

Podemos lidar com o estado verificado com a pseudoclasse :checked e o seletor de irmãos adjacentes em nosso rótulo:

 input[type="radio"]:checked + label { color: black; }

Para o ponto interno, podemos aproveitar um gradiente radial em nosso pseudoelemento:

 input[type="radio"]:checked + label::before { background: radial-gradient(0.75em circle at center, currentColor 50%, transparent 55%); box-shadow: 0 0 1em 0 rgba(10, 150, 255, 0.75); border-color: currentColor; }

Pronto, agora quando clicamos neles, eles funcionam como botões de opção nativos. E podemos melhorar as interações adicionando alguns efeitos de transição:

 label::before { ... transition: border ease-in 150ms, box-shadow ease-in 150ms; }

Não vamos esquecer do foco

Para melhorar a acessibilidade, também precisaremos abordar o estado de foco dos botões de opção simulados. Desta vez precisaremos utilizar a pseudoclasse :focus e o seletor irmão adjacente com o rótulo:

 input[type="radio"]:checked + label, input[type="radio"]:focus + label { color: black; } input[type="radio"]:focus + label::before { box-shadow: 0 0 1em 0 rgba(10, 150, 255, 0.75); border-color: currentColor; }

Conclusão

Seguindo esse método, podemos criar botões de opção personalizados elegantes e acessíveis que melhoram muito a experiência do usuário. Esses botões de opção personalizados não apenas têm uma aparência melhor que os padrão, mas também podem fornecer melhor feedback e interação quando implementados corretamente.

Este foi um exemplo bastante simples que pode nem parecer muito diferente dos estilos nativos do navegador, mas a chave é que, com essa configuração, podemos fazer praticamente o que quisermos. Portanto, fique à vontade para experimentar os estilos e adaptá-los ao design do seu projeto.

Quer ver isso em ação?

Confira o código de demonstração e exemplos desta técnica no exemplo de caneta de código abaixo. Se você tiver alguma dúvida ou opinião, não hesite em deixar um comentário.

Lembre-se que com um pouco de criatividade e um pouco de CSS, você pode transformar a aparência dos botões de opção HTML para combinar com seu design, mantendo a acessibilidade e a usabilidade!