Propriedade Appearance
Última atualização: 2026-09-13
appearance Propriedade Appearance
A propriedade appearance controla se um elemento usa a aparência nativa do navegador — a renderização padrão dos controles de formulário. Quando definida como none, o elemento perde sua aparência nativa e seu estilo passa a ser totalmente controlado pelo CSS, tornando-a uma propriedade essencial para personalizar controles de formulário.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
appearance: none | auto;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
none | auto | Palavra-chave | A aparência nativa |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| appearance | ✓ v79 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： appearance: none é comumente usada para personalizar controles de formulário como <select>, <input type="checkbox"> e <input type="radio">.
Aviso： Para compatibilidade, use também os prefixos -webkit-appearance e -moz-appearance; o suporte dos navegadores para appearance varia ligeiramente.
❓ Perguntas Frequentes
QQuais estilos nativos appearance: none remove dos controles?
AEla remove a aparência nativa que os navegadores adicionam aos controles de formulário: a seta do menu suspenso do select, os estilos de marcação padrão de checkbox/radio, a trilha do controle deslizante range, o botão de limpar das entradas de busca e os botões de incremento das entradas numéricas. Após a remoção, o visual do controle é zerado e o CSS assume completamente, mas a funcionalidade permanece — clicar, selecionar e enviar continuam funcionando.
QA propriedade appearance pode restaurar a aparência padrão do controle?
ASim — appearance: auto restaura a renderização nativa do navegador. Mas navegadores diferentes restauram em graus ligeiramente distintos, e se você personalizou bastante com none antes, inconsistências sutis podem permanecer após a restauração. Recomenda-se manter apenas os dois valores auto e none.
QA seta do select sumiu após appearance: none — como adiciono uma seta personalizada?
APreencha com uma imagem de fundo: após appearance: none remover a seta nativa, defina background: #fff url('arrow.svg') no-repeat right 12px center; e adicione padding-right ao select para abrir espaço para a seta. Este é o padrão clássico de menu suspenso personalizado — basta manter uma área de clique suficientemente grande.
QPreciso escrever tanto appearance quanto os prefixos -webkit-appearance?
ASim, é recomendado. -webkit-appearance abrange Safari e Chromium mais antigos, -moz-appearance abrange Firefox e a appearance padrão é para navegadores mais novos. O Firefox ainda exige -moz-appearance: none para surtir efeito em caixas de seleção, por isso escrever os três é o mais seguro.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
