Select customizável (appearance: base-select)

O <select> nativo sempre foi ótimo em acessibilidade e comportamento, mas péssimo em personalização: dava pra estilizar a caixa fechada, mas o menu de opções ficava preso à aparência do sistema operacional. O novo appearance: base-select finalmente resolve isso.

O problema de sempre

Para ter um select com ícones, layout customizado ou múltiplas colunas nas opções, a solução quase sempre era abandonar o <select> nativo e recriar tudo com <div>s, JavaScript e muita atenção à acessibilidade (navegação por teclado, leitores de tela, etc.).

Como funciona o base-select

Aplicando appearance: base-select no <select>, o navegador libera o estilo completo da lista de opções, mantendo todo o comportamento nativo (teclado, acessibilidade, formulários):

<select id="pais">
    <option value="br">🇧🇷 Brasil</option>
    <option value="us">🇺🇸 Estados Unidos</option>
    <option value="pt">🇵🇹 Portugal</option>
</select>

select, ::picker(select) {
    appearance: base-select;
}

select {
    border-radius: 8px;
    padding: 8px 12px;
}

select::picker-icon {
    color: #12A8C3;
}

option {
    padding: 8px 12px;
    border-radius: 4px;
}

option:checked {
    background: #12A8C3;
    color: #fff;
}

Com isso, dá pra estilizar cores, espaçamento, bordas e até o ícone da setinha, tudo com CSS puro, sem reimplementar o componente.

Conteúdo customizado dentro das opções

Outra novidade é poder colocar HTML mais rico dentro de cada <option>, como ícones ou imagens, algo que o <select> nativo nunca permitiu antes:

<select id="usuario">
    <option value="1">
        <img src="avatar1.png" alt="">
        Ana Silva
    </option>
    <option value="2">
        <img src="avatar2.png" alt="">
        Bruno Costa
    </option>
</select>

Vantagens

• Continua sendo um <select> de verdade: funciona em formulários, com teclado e leitores de tela, sem reinventar a acessibilidade.
• Permite ícones, imagens e layout customizado dentro das opções.
• Reduz drasticamente a necessidade de bibliotecas JS só para ter um "select bonito".

Compatibilidade

Essa é uma funcionalidade bem recente e ainda em expansão entre navegadores. Vale sempre checar o suporte antes de usar em produção, com um fallback para o select tradicional nos navegadores que ainda não suportam.

caniuse

Conclusão

O select customizável é uma das mudanças mais esperadas por quem desenvolve formulários, permitindo finalmente estilizar esse componente sem abrir mão da acessibilidade nativa. Vale acompanhar de perto a evolução do suporte nos navegadores.