Aparência - CSS-Tricks | CSS Almanac 2025

A appearancepropriedade é usada para exibir um elemento usando um estilo nativo da plataforma com base no tema do sistema operacional dos usuários.

.thing ( -webkit-appearance: value; -moz-appearance: value; appearance: value; )

Isso está começando a ficar sem prefixo, o que é ótimo porque a história entre navegadores aqui é muito complicada.

A appearancepropriedade é usada por um de dois motivos:

Para aplicar o estilo específico da plataforma a um elemento que não o tem por padrão
Para remover o estilo específico da plataforma para um elemento que o tem por padrão

Por exemplo, as entradas com um type=searchem navegadores WebKit por padrão têm cantos arredondados e são muito restritas no que você pode alterar via CSS. Se você não quiser esse estilo, pode removê-lo de uma só vez com a aparência.

input(type=search) ( -webkit-appearance: none; )

Ou você pode pegar uma entrada com type = text e apenas fazer com que pareça uma entrada de pesquisa:

input(type=text) ( -webkit-appearance: searchfield; )

Valores WebKit

caixa de seleção
rádio
botão de apertar
botão quadrado
botão
chanfro de botão
caixa de listagem
listitem
menulista
botão menulista
menulist-text
menulist-textfield
barra de rolagem botão para cima
barra de rolagem botão para baixo
scrollbarbutton-left
scrollbarbutton-right
scrollbartrack-horizontal
scrollbartrack-vertical
scrollbarthumb-horizontal
scrollbarthumb-vertical
scrollbargripper-horizontal
scrollbargripper-vertical
controle deslizante horizontal
barra vertical
sliderthumb-horizontal
sliderthumb-vertical
acento circunflexo
campo de busca
decoração de campo de pesquisa
searchfield-results-decoration
botão de resultados do campo de pesquisa
botão de cancelar campo de pesquisa
campo de texto
área de texto

Valores Mozilla

Nenhum
botão
caixa de seleção
checkbox-container
caixa de seleção pequena
diálogo
caixa de listagem
item do menu
menulista
botão menulista
menulist-textfield
menupopup
Barra de progresso
rádio
rádio-container
rádio pequeno
resizer
Barra de rolagem
barra de rolagem botão para baixo
scrollbarbutton-left
scrollbarbutton-right
barra de rolagem botão para cima
scrollbartrack-horizontal
scrollbartrack-vertical
separador
Barra de status
aba
tab-left-edge Obsoleto
tabpanels
campo de texto
textfield-multiline
barra de ferramentas
botão da barra de ferramentas
Caixa de ferramentas
-moz-mac-unified-toolbar
-moz-win-borderless-glass
-moz-win-browsertabbar-toolbox
-moz-win-communication-toolbox
-moz-win-glass
-moz-win-media-toolbox
dica
treeheadercell
treeheadersortarrow
item de árvore
Treetwisty
Treetwistyopen
vista em árvore
janela

Recursos

Mozilla Docs para -moz-aparência
Trent Walton na aparência do Webkit
Shaun Inman sobre a desativação da sombra interna de texto de entradas de texto no iPad
CSS3 Spec

Suporte para navegador

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.