13.12.2024

Usando Imagens em Vez de Botões de Rádio: HTML/CSS

Visão Geral Rápida

Para transformar imagens em botões de rádio interativos, siga estes passos: esconda os elementos <input type="radio">, depois exiba-os usando os elementos <label> com uma background-image. Para vincular os elementos de rótulo aos botões de rádio correspondentes, utilize o atributo for. Aproveite a pseudo-classe CSS :checked para destacar a imagem ativa, visualizando assim a seleção do usuário.

<style>
  .image-radio { display: none; }
  .radio-label { 
    cursor: pointer;
    background-size: cover; 
    width: 100px; height: 100px; /* Defina os tamanhos desejados */
  }
  .image-radio:checked + .radio-label { border: 2px solid #f00; } /* Destaca a seleção */
</style>

<form>
  <input type="radio" id="img1" class="image-radio" name="choice" />
  <label for="img1" class="radio-label" style="background-image: url('img1.jpg');"></label>

  <input type="radio" id="img2" class="image-radio" name="choice" />
  <label for="img2" class="radio-label" style="background-image: url('img2.jpg');"></label>
</form>

Atribua à .radio-label um tamanho de pixel apropriado. Agora, a escolha da imagem mudará magicamente o valor do botão de rádio.

Melhorando a Interação e Acessibilidade

Adicione estados de hover decorativos aos botões de rádio usando animações ou transições CSS para melhorar a experiência do usuário:

.radio-label { transition: transform 0.2s ease; }
.image-radio:checked + .radio-label { transform: scale(1.1); /* Aumenta o elemento na seleção */ }

Não se esqueça da acessibilidade para leitores de tela, adicionando descrições aria-label para cada imagem:

<input type="radio" id="img3" class="image-radio" name="choice" />
<label for="img3" class="radio-label" aria-label="Camisa com imagem de cachorro" style="background-image: url('img3.jpg');"></label>

Assim, os botões de rádio ocultos serão corretamente interpretados pelos leitores de tela.

Compatibilidade entre Navegadores

Garantir suporte entre navegadores é um aspecto fundamental do desenvolvimento web. Aplique a propriedade appearance com prefixos específicos de navegador para normalizar as diferenças nos estilos padrão across navegadores:

.image-radio {
  -webkit-appearance: none; /* Para Chrome */
  -moz-appearance: none; /* Para Firefox */
  appearance: none;
}

Para ainda mais compatibilidade entre navegadores, considere usar ferramentas como o Modernizr.

Estilizando Estaduais de Foco e Seleção

Preste especial atenção à estilização das interações com os elementos, pois isso pode melhorar significativamente a experiência do usuário. Estilize o CSS para os estados :focus e :checked da seguinte forma:

.radio-label:focus-within { box-shadow: 0 0 0 2px #5b9dd9; }
.image-radio:focus + .radio-label { outline: none; }

Usar unidades relativas como em ou vw ajuda os elementos a se adaptarem a diferentes tipos de tela.

Visualização

Impacte a experiência associada de seus usuários: imagine botões de rádio como filas de camisetas no seu guarda-roupa:

Botões de Rádio Regulares: [👔] [👔] [👔]

Agora, transforme-os em imagens, como se estivesse selecionando camisetas com estampas favoritas:

Imagens em vez de Botões de Rádio: [🐶👕] [🍕👕] [🚀👕]

Clicar na imagem da camiseta com a estampa é sua seleção:

Selecionado: [🍕👕]

É como revisar a seleção de camisetas no seu guarda-roupa, mas, em vez disso, você está trabalhando com elementos de formulário na web! 🌟

Integração Harmoniosa e Customização Estendida

Todos os botões de rádio que trabalham no mesmo grupo devem compartilhar um name comum. Quando selecionados, um estilo é aplicado a .image-radio:checked, e você pode adicionar ícones ou marcas de seleção personalizadas usando o pseudo-elemento ::after:

.image-radio:checked + .radio-label::after {
  content: url('checkmark-icon.png');
  position: absolute;
  top: 10px; right: 10px;
}

Se você quiser que um botão de rádio seja selecionado por padrão, adicione o atributo checked:

<input type="radio" id="img1" class="image-radio" name="choice" checked />

Ao aplicar user-select: none, você pode evitar a seleção acidental de texto ao clicar nas imagens.

Solucionando Problemas como um Profissional

Se você encontrar um problema com a ênfase de texto ao selecionar, preste atenção à propriedade user-select configurada como none:

.radio-label { user-select: none; }

Para evitar a distorção da imagem ao escalar, use as propriedades CSS apropriadas para o fundo:

.radio-label {
  background-size: contain;
  background-position: center;
}

Recursos Úteis

1. Usando Imagens como Botões de Rádio - Stack Overflow - sobre usar imagens como botões de rádio.
2. Selectores Nível 3 - uma referência para seletores CSS para o estado :checked.
3. Aprenda Formulários | web.dev - técnicas avançadas para trabalhar com formulários na web.
4. O "Checkbox Hack" (e coisas que você pode fazer com ele) | CSS-Tricks - estilizando checkboxes e outras possibilidades.

Video

Navigation