selectedcontent – O novo jeito de criar selects no HTML
selectedcontent: descubra como usar o novo elemento do HTML para criar selects personalizados sem JavaScript e transforme seus dropdowns com HTML e CSS.
O que você vai aprender?
Introdução
Se você já tentou estilizar um <select> no HTML, sabe que personalizar dropdowns era uma verdadeira dor de cabeça. Contorno com JavaScript, recriar o componente do zero, CSS que não funcionava em todos os navegadores… um caos.
Mas agora temos uma novidade, o selectedcontent, um novo elemento que chegou para simplificar sua vida e permitir selects totalmente personalizados usando apenas HTML e CSS — sem depender de JavaScript.
Neste guia completo, você vai aprender como funciona o selectedcontent, como usar em seus projetos, quais limitações ainda existem e como criar menus bonitos e funcionais mesmo sendo iniciante.
Prepare-se para dar um upgrade nos seus formulários!
Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:
Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.
O que é o elemento <selectedcontent>?
O selectedcontent é um novo elemento HTML pensado para permitir que você personalize o conteúdo exibido dentro de um <select> mantendo toda a acessibilidade e estrutura nativa.
Antes, o <select> só aceitava texto dentro do <option>. Agora, você pode usar HTML dentro das opções — imagens, elementos inline, ícones e muito mais.
Antes (modo tradicional):
O modo tradicional de utilizar o select só aceita texto dentro das suas opções:
<section class="grid">
<div class="card">
<form class="form" autocomplete="off">
<div class="field">
<label for="plan">Plano</label>
<select id="plan">
<button><selectedcontent></selectedcontent></button>
<option value="starter">
Starter
</option>
<option value="pro" selected>
Pro
</option>
<option value="business">
Business
</option>
<option value="enterprise">
Enterprise
</option>
</select>
</div>
</form>
</div>
</section>
Agora - Usando a estrutura com selectedcontent:
Com o
selectedcontent, conseguimos exibir esse conteúdo também no item selecionado — sem “bugar” o select.
Para quem está começando: pense no selectedcontent como o display do item atual escolhido no select, só que com total liberdade visual.
<section class="grid">
<div class="card">
<form class="form" autocomplete="off">
<div class="field">
<label for="plan">Plano</label>
<select id="plan">
<button><selectedcontent></selectedcontent></button>
<option value="starter">
<span class="row"
><span class="badge b1">S</span><strong>Starter</strong
><span>• Ideal para testes</span></span
>
</option>
<option value="pro" selected>
<span class="row"
><span class="badge b2">P</span><strong>Pro</strong
><span>• Projetos sérios</span></span
>
</option>
<option value="business">
<span class="row"
><span class="badge b3">B</span><strong>Business</strong
><span>• Times e empresas</span></span
>
</option>
<option value="enterprise">
<span class="row"
><span class="badge b4">E</span><strong>Enterprise</strong
><span>• Escala máxima</span></span
>
</option>
</select>
</div>
</form>
</div>
</section>
Importante: A tag <selectedcontent> precisa ficar dentro de um <button> para funcionar corretamente. Se tentar colocar ela sozinha, o conteúdo quebra ou aparece no lugar errado.
HTML e CSS ImpressionadorVocê vai aprender não só os fundamentos básicos, intermediários e avançados de HTML e CSS, como também vai aprender a integrar com os principais frameworks. Além disso, você vai sair do curso com um portfólio de projetos completo!
Começar agora
Quando usar o <selectedcontent>
Você deve usar esse recurso quando quiser criar selects mais bonitos ou funcionais sem depender de JS. Exemplos perfeitos:
- Seleção de planos com ícones
- Escolha de idioma com bandeirinhas
- Seleção de países com DDI
- Tema claro/escuro com ícones
- Seletores com imagens de produto
Importante: Esse recurso ainda tem disponibilidade limitada entre navegadores. Sempre verifique na documentação oficial ou no Can I Use
Mas já vale aprender desde agora, assim você sai na frente.
Personalizando com CSS
Agora vem a parte legal — podemos estilizar tanto o item selecionado quanto as opções.
Reset visual do select
Usamos appearance: base-select; para remover o estilo padrão do navegador.
select,
::picker(select) {
appearance: base-select;
}Estilizando opções
Padding para deixar mais bonito:
option {
padding: 5px;
}Estilo no item selecionado dentro da lista:
option:checked {
background-color: #ffd166;
}Remover o check padrão:
option::checkmark {
display: none;
}Exibindo imagens nas opções
Sim, com essa propriedade dá para colocar imagens dentro das opções! Por exemplo:
<select id="plan">
<button><selectedcontent></selectedcontent></button>
<option value="starter">
<span class="row"
><span class="badge b1">S</span><strong>Starter</strong
><span>• Ideal para testes</span></span
>
<img src="https://www.hashtagtreinamentos.com/wp-content/themes/hashtag/desenvolvimento_hashtag/assets/imgs/Global/logo-hashtag.webp" width="18">
</option>
Imagina isso para criar um menu de selecionar idioma com bandeiras? É um detalhe que faz toda a diferença no visual da sua página!
Sugestão: sempre reduza o tamanho da imagem para manter o layout limpo.
Boas práticas ao usar selectedcontent
- Sempre teste em navegadores diferentes
- Use fallback para browsers antigos
- Prefira elementos inline (
span,img,svg) - Mantenha o contraste para acessibilidade
- Teste com teclado (Tab / Enter)
Casos e usos criativos do novo select no HTML
| Cenário | Exemplo |
|---|---|
| Seleção de idioma | Bandeiras dos países por idioma |
| Seleção de plano | 💡 Starter / 🚀 Pro |
| Cores/temas | 🌙 Dark / ☀️ Light |
| Países + DDI | Bandeiras dos países |
| Produtos | Miniaturas de imagens com nome |
Conclusão e Próximos passos
O selectedcontent chegou para mudar o visual dos seus projetos! Agora você pode criar seletores ricos, funcionais e apenas com HTML e CSS puro. Isso significa interfaces modernas sem depender de JavaScript para tudo.
E esse é só o começo: dominar HTML e CSS de verdade desbloqueia interfaces mais rápidas, acessíveis e profissionais.
Quer dar o próximo passo e se tornar um desenvolvedor completo? Aprenda desenvolvimento Full Stack do zero ao avançado com nosso Curso Full Stack Impressionador.
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
FAQ - Perguntas Frequentes
O selectedcontent funciona em todos os navegadores?
Ainda não. O suporte é limitado, então sempre verifique a compatibilidade e tenha um fallback simples para navegadores antigos.
Preciso usar JavaScript com o selectedcontent?
Não. Ele foi criado justamente para permitir dropdowns personalizados com HTML e CSS puro.
Posso colocar imagens dentro de option?
Sim! Você pode usar <img>, <span>, <svg> e outros elementos inline.
Isso substitui completamente soluções com JS e libs como Select2?
Por enquanto, não. Para casos avançados (busca interna, selects com centenas de opções, multi-seleção), libs ainda são úteis.
É indicado usar em projetos profissionais?
Sim, desde que o público use navegadores modernos. Sempre teste antes e ofereça fallback.
Hashtag Treinamentos
Para acessar publicações de Full Stack, clique aqui!
Posts mais recentes de Full Stack
- LESS CSS: Guia Completo do Pré-processador (2026)
LESS CSS é um pré-processador que adiciona variáveis, mixins, nesting e operações matemáticas ao CSS. Aprenda a configurar e usar com projeto prático. - Variáveis no CSS (CSS Variables): Como Usar de Forma Profissional
Você sabe o que são Variáveis no CSS (CSS Variables)? Aprenda como usar técnicas que vão transformar a forma como você escreve variáveis CSS. - Try Catch no JavaScript: Programação Defensiva na Prática
Aprenda a usar try catch no JavaScript e melhore a sua programação defensiva!
Posts mais recentes da Hashtag Treinamentos
- Planilha de Controle de Notas Fiscais no Excel [Grátis]
Baixe a planilha de controle de notas fiscais no Excel grátis: calcule ISS e retenções, veja o que está em aberto e gere a cobrança de cada nota de serviço. - Qual IA usar na empresa: ChatGPT, Claude ou Perplexity?
Qual IA usar na empresa: veja as diferenças entre ChatGPT, Claude e Perplexity e quando cada um rende mais em cada área da sua equipe. - Apostilas Gratuitas em PDF: Excel, Power BI, Python e IA
Baixe apostilas gratuitas em PDF de Excel, Power BI, Python, Claude e agentes de IA, com exercícios e gabarito. Escolha a sua e comece hoje.
