05.02.2025

Mudando a Cor de Fundo das Opções em um Dropdown ao Passar o Mouse: CSS

Resposta Rápida

Você quer mudar a cor de fundo das opções de um dropdown ao passar o mouse sobre elas? Nesse caso, o CSS para estilização e o JavaScript para tratamento de eventos serão úteis. É importante saber que a pseudo-classe :hover nem sempre funciona corretamente com o elemento <option>. Abaixo está um exemplo de sua aplicação.

CSS:

.highlight { background-color: lightblue; } /* Escolha qualquer cor que você goste */

JavaScript:

const meuSelect = document.getElementById('meuSelect');
meuSelect.addEventListener('mouseover', function(e) {
  // Este elemento precisa ser destacado usando a classe "highlight".
  if(e.target.tagName === 'OPTION') e.target.classList.add('highlight');
});
meuSelect.addEventListener('mouseout', function(e) {
  // O evento terminou, então devemos remover o destaque.
  if(e.target.tagName === 'OPTION') e.target.classList.remove('highlight');
});

Este código adiciona a classe .highlight às opções quando o mouse passa sobre elas, mudando o fundo para uma cor azul clara.

Superando Limitações de Estilo

Estilizar as tags <select> e <option> pode causar problemas ao aplicar as mesmas regras de estilo em diferentes navegadores. Muitos deles dependem da renderização de elementos com componentes do sistema, o que pode limitar o suporte para a pseudo-classe :hover em <option>.

No Firefox, existe a possibilidade de estilização via sombras, mas, infelizmente, esse método não é universal.

No Chrome, você só pode mudar o background-color para select:focus > option:checked. Quando o mouse passa sobre, as coisas se complicam um pouco.

Criando um Dropdown Personalizado para Estilização Precisa

Criar um dropdown personalizado usando ul/li permite reproduzir de forma confiável efeitos de hover, padrões de interação e acessibilidade de listas padrão. Aqui, o JavaScript é necessário para controle de eventos e aplicação de estilos.

Visualização

Veja como uma paleta interativa 🎨 reflete a resposta de cada item do dropdown à interação:

| Quadrado de Cor | Interação         | Resultado          |
| ---------------- | ----------------- | -------------------|
| 🟥 Sem hover      | 🤚➡️🎨               | 🟥 Sem mudança      |
| 🟩 Com hover      | ✋🎨([Hover])     | 🟨 Amarelo         |

O efeito de hover é como um traço de um artista acrescentando uma nova cor a uma tela:

👆🖌️🟨 (Hover) ➡️ A opção do dropdown muda de cor

Ao simplesmente mudar a cor de fundo da opção, adicionamos dinamismo e tornamos a percepção mais intuitiva, tudo isso sem complicar o processo de interação com os elementos da interface.

Implementação Avançada e Compatibilidade entre Navegadores

Usando Sombras em CSS

Com o CSS, é possível usar sombras para simular a mudança de fundo de uma opção, utilizando parâmetros como 0 0 10px 100px #000 inset. No entanto, deve-se notar que essa solução não funciona em todos os navegadores.

Capacidades do JavaScript

Se a estilização com CSS encontrar resistência, o JavaScript pode entrar em ação. Ele pode rastrear estados de hover e alterar os estilos dos elementos da interface do usuário.

Vantagens dos Dropdowns Personalizados

Dropdowns criados com ul/li e botões de rádio ocultos podem imitar lindamente o comportamento de listas padrão. Essa abordagem oferece ampla personalização e capacidades de interação.

Recursos Úteis

1. Seletor CSS :hover - W3Schools — Um guia detalhado sobre o uso do seletor CSS :hover.
2. Estilização Padrão de Dropdowns | CSS-Tricks — Dicas úteis para estilizar elementos <select> que vale a pena considerar.
3. Erro de Exclusão de Linha SQLite no Android - Stack Overflow — Experiência da comunidade no StackOverflow sobre a estilização com mudanças de cor nas tags <option>.
4. Guia | DigitalOcean — Um tutorial passo a passo sobre como criar dropdowns com seu próprio estilo usando CSS.
5. :hover - CSS: Folhas de Estilo em Cascata | MDN — A documentação oficial do MDN explica os funcionamento da pseudo-classe :hover em detalhes.
6. ::selection Pseudo-elemento CSS | Can I use... Tabelas de suporte para HTML5, CSS3, etc — Tabelas contendo informações sobre o suporte do CSS ::selection em elementos <option>/<select> em vários navegadores.

Video

Navigation