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.   https://youtu.be/PlldXyuTnUw?embedable=true  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   em nosso rótulo junto com alguns CSS simples para criar a aparência que procuramos. ::before  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   e o seletor de irmãos adjacentes em nosso rótulo: :checked   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   e o seletor irmão adjacente com o rótulo: :focus   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!   https://codepen.io/brianmtreese/pen/bGOGeBJ?embedable=true

Buy Me a Coffee

Este áudio é produzido no idioma original da história!

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

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

O guia completo para uma migração bem-sucedida para a nuvem: estratégias e práticas recomendadas

De fóruns a feeds: como os algoritmos de mídia social moldam a interação digital

Vazamento do prompt do sistema Claude Sonnet 3.5: uma análise forense

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

O guia completo para uma migração bem-sucedida para a nuvem: estratégias e práticas recomendadas

De fóruns a feeds: como os algoritmos de mídia social moldam a interação digital

Vazamento do prompt do sistema Claude Sonnet 3.5: uma análise forense

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps