21.11.2024

CSS: Estilizando o Elemento <option> Selecionado em <select>

Resposta Rápida

Para estilizar elementos <option> selecionados, é aconselhável usar JavaScript, já que não existe uma pseudo-classe :selected correspondente no CSS. Anexe um manipulador de evento change ao elemento <select> para alterar o estilo:

document.querySelector('select').addEventListener('change', function() {
  this.classList.toggle('selected', !!this.value);
});

Em seguida, ative o <select> adicionando o CSS:

select.selected option:checked {
  background-color: yellow; /* Um tom brilhante para um destaque eficaz, como a luz do sol */
}

Nuances: Aprimorando o Visual do Elemento Option

Vamos aprofundar nos detalhes da estilização dos elusivos elementos <option>.

Ferramentas de Estilo: Estilização Direta de <option>

Estilizar o <option> pode ser complicado devido ao comportamento inconsistente entre diferentes navegadores. No entanto, algumas propriedades, como color e background-color, funcionam de forma confiável:

option:checked {
  color: red; /* Este tom nunca deve ser ignorado! */
}

Para ocultar o elemento selecionado da lista quando não estiver em foco:

select:not(:focus) option:checked {
  display: none; /* Um método para manter o item selecionado fora de vista */
}

Essas regras podem levar a comportamentos variados em navegadores devido às características únicas de renderização de HTML.

Chamando a Atenção: Estilizando o Dropdown Fechado

Vamos criar uma aparência para o elemento <select> selecionado para que se destaque quando a lista estiver oculta:

select {
  color: red;
}
select option:not(:checked) {
  color: black;
}

Refinamento nos Detalhes: Aplicando Gradientes

Use linear-gradient como uma background-image para obter um efeito de gradiente em <option>:

option:checked {
  background-image: linear-gradient(to right, #ffe0e0, #ffd6d6); /* Tons de vermelho para um acento elegante */
}

Esse truque tem bom suporte em navegadores baseados em Gecko/Webkit, como Firefox e Chrome.

Visualização

Imagine um tabuleiro de xadrez onde cada peça tem suas regras de movimento.

| ♜ | ♞ | ♝ | ♛ | ♔ | ♝ | ♞ | ♜ |
|   |   |   |   |   |   |   |   |
|   | ♟ |   |   |   |   |   |   |
|   |   |   | ♟ |   |   |   |   |
|   |   |   |   | ♙ |   |   |   |
|   |   |   |   |   |   |   |   |
|   |   | ♗ |   |   |   |   |   |
|   |   |   |   |   |   |   |   |
| ♖ | ♘ | ♗ | ♕ | ♔ |   | ♘ | ♖ |

Gostaríamos de ter uma pseudo-classe :selected para <option> no CSS para destacar elementos selecionados com a mesma facilidade com que um peão faz seus movimentos.

Estado atual:

|   |   |   |   |   |   |   |   |
|   | ♙ |   |   |   |   |   |   |
|   |   | ⬜ |   |   |   |   |   |

A posição desenhada:

|   |   |   |   |   |   |   |   |
|   | 🟩 |   |   |   |   |   |   |
|   |   | 🟩 |   |   |   |   |   |

Quão nobre seria ter uma :selected para nosso <option>, iluminando visivelmente a seleção como os movimentos de um peão no tabuleiro. 🤔

Adaptando Métodos de Estilização para <option>

Estilizando <option>: Nuances da Abordagem

Aplicar o atributo style diretamente ao <option> permite consistência entre os navegadores:

<option style="color: red;" selected>Opção Selecionada</option>

Destacando por Atributos

Vamos fazer com que o <option> marcado com o atributo selected fique mais chamativo, dando-lhe estilos mais ousados:

option[selected] {
  font-weight: bold;
}

Estilização Personalizada para Opções Não Selecionadas

Além de enfatizar a seleção, vamos refinar a estilização para opções não selecionadas:

select:not(:checked) > option {
  opacity: 0.5;
}

Recursos Úteis

1. MDN Web Docs sobre a pseudo-classe :checked
2. Especificação do Seletor de Nível 4 do W3C
3. Estilização Unificada de Dropdowns por CSS-Tricks
4. Personalizando Dropdowns no W3Schools
5. MDN Web Docs sobre a pseudo-classe :focus
6. Suporte ao Seletor de Nível 4 de CSS no Can I use...

Video

Navigation