Propriedade appearance do CSS

A propriedade appearance no CSS é usada para controlar a aparência de controles de formulário, como botões, checkboxes, botões de opção e outros. Ela permite alterar o estilo dos controles nativos da interface do usuário, proporcionando uma aparência consistente em diferentes navegadores e dispositivos. No desenvolvimento web moderno, appearance: none é o principal caso de uso para personalizar controles de formulário, enquanto os demais valores são em grande parte obsoletos ou não padronizados.

As propriedades -webkit-appearance e -moz-appearance são extensões proprietárias de vendor usadas para aplicar estilização nativa da plataforma com base no tema do sistema operacional. Elas não fazem parte da especificação oficial W3C do CSS e são suportadas principalmente por navegadores baseados em WebKit (Safari, Chrome) e Gecko (Firefox), respectivamente.

Se essa propriedade for utilizada em sites, deve ser testada com cautela. A implementação da propriedade appearance pode ser bastante diferente, especialmente em navegadores mais antigos. Nos navegadores mais recentes, há apenas pequenas diferenças.

Aviso

Note que a propriedade "appearance" não é suportada por todos os navegadores, e seu comportamento pode variar dependendo do navegador e do sistema operacional. Além disso, alterar a aparência dos controles de formulário pode afetar a usabilidade e acessibilidade do seu site, por isso é importante usá-la com critério.

Valor Inicial	normal
Aplica-se a	Todos os elementos.
Herdado	Não.
Animável	Sim.
Versão	CSS3
Sintaxe DOM	object.style.appearance = "none";

Quando usar `appearance`

Na prática, você recorre ao appearance em uma situação: quando deseja reestilizar completamente um controle de formulário e a aparência nativa do navegador está atrapalhando. Definir appearance: none remove a renderização nativa de elementos como checkbox, botão de opção, dropdown <select> ou campo de texto, deixando uma tela em branco para estilizar com suas próprias bordas, cores e pseudo-elementos.

A contrapartida é a responsabilidade. Controles nativos vêm com anéis de foco, comportamento de teclado e convenções de plataforma gratuitamente. Ao remover a aparência nativa, você deve reconstruir os estados visuais (foco, marcado, desativado) por conta própria, ou o controle se torna confuso e inacessível. Por esse motivo:

Use appearance: none quando realmente precisar de um controle com estilo personalizado e estiver preparado para lidar com seus estados e acessibilidade.
Para um ajuste rápido de cor (a cor do tick ou preenchimento de um checkbox, botão de opção ou controle deslizante de intervalo), prefira a propriedade accent-color — ela mantém a acessibilidade nativa e exige muito menos código.

Sintaxe

Sintaxe da Propriedade appearance do CSS

appearance: none | auto | initial | inherit | icon | window | button | menu | field | desktop | workspace | document | tooltip | dialogue | push-button | hyperlink | radio-button | checkbox | menu-item | tab | menubar | outline-tree | range | signature | password;

Nota

Apenas none e auto são amplamente suportados nos navegadores modernos. Os demais valores são em grande parte obsoletos ou não padronizados.

Exemplo: um checkbox personalizado

O exemplo abaixo remove a renderização nativa do checkbox com appearance: none e o reconstrói como uma caixa estilizada que exibe uma marca de verificação quando selecionado.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .custom-checkbox input[type="checkbox"] {
        -webkit-appearance: none; /* remove default appearance on Webkit-based browsers */
        -moz-appearance: none; /* remove default appearance on Mozilla-based browsers */
        appearance: none; /* remove default appearance on all other browsers */
        width: 20px;
        height: 20px;
        border: 2px solid #333;
        border-radius: 3px;
        outline: none;
        cursor: pointer;
        margin-right: 10px;
      }

      .custom-checkbox input[type="checkbox"]:checked + label::before {
        content: "\2714"; /* Unicode checkmark symbol */
        display: inline-block;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        color: #fff;
        background-color: #333;
        border-radius: 2px;
        margin-right: 8px;
      }
    </style>
  </head>
  <body>
    <span class="custom-checkbox">
      <input type="checkbox" id="myCheckbox" name="myCheckbox" />
      <label for="myCheckbox">Checkbox</label>
    </span>
  </body>
</html>

Experimente Você Mesmo »

Como funciona:

appearance: none (com os prefixos -webkit- e -moz- para navegadores mais antigos) remove a renderização padrão do checkbox para que possamos estilizá-lo por conta própria.
O checkbox recebe uma largura e altura de 20px, uma borda sólida de 2px e um border-radius de 3px para cantos arredondados. Definir outline como none remove o anel de foco padrão (no código real, substitua por seu próprio estilo de foco visível para acessibilidade).
Quando o checkbox está marcado, o pseudo-elemento ::before no <label> adjacente insere o caractere Unicode de marca de verificação (\2714) dentro de uma caixa escura, usando cor de texto branco para que o tick se destaque contra o background-color.

Nota

Para personalização simples de cores em controles de formulário, o CSS moderno recomenda usar a propriedade accent-color em vez de appearance: none. Ela exige menos código e mantém os recursos nativos de acessibilidade.

Um uso muito comum de appearance: none é remover a seta padrão e o estilo nativo de um <select> para que você possa adicionar sua própria seta com uma imagem de fundo e controlar o preenchimento e a borda.

<!DOCTYPE html>
<html>
  <head>
    <title>Custom select</title>
    <style>
      select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        padding: 8px 32px 8px 12px;
        border: 1px solid #888;
        border-radius: 6px;
        background-color: #fff;
        /* a small SVG chevron as the dropdown arrow */
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M2 4l4 4 4-4" stroke="%23333" fill="none" stroke-width="2"/></svg>');
        background-repeat: no-repeat;
        background-position: right 12px center;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <select>
      <option>Choose a fruit</option>
      <option>Apple</option>
      <option>Banana</option>
      <option>Cherry</option>
    </select>
  </body>
</html>

Sem appearance: none, o navegador mantém sua seta nativa de dropdown e você não pode substituí-la de forma confiável. Com ela removida, o cursor e a seta personalizada ficam totalmente sob seu controle.

Valores

Nota

Apenas none e auto são padrão e amplamente suportados. Os demais valores são em grande parte obsoletos ou não padronizados nos navegadores modernos.

Valor	Descrição
none	Remove toda a estilização específica da plataforma. Nota: `normal` é o valor inicial real, não `none`.
auto	O agente de usuário seleciona a estilização especial apropriada com base no elemento. Age como none em elementos sem estilização especial.
icon	Uma pequena imagem representando um objeto, frequentemente com um nome ou rótulo.
window	Um viewport, uma superfície emoldurada usada para apresentar objetos e conteúdo para visualização e interação do usuário.
button	Um pequeno objeto geralmente rotulado com texto que representa uma escolha do usuário.
menu	Um conjunto de opções para o usuário escolher, possivelmente mais de uma ao mesmo tempo. Existem vários tipos específicos de menus.
field	Uma área fornecida para o usuário inserir ou editar um valor, tipicamente usando um teclado. Existem vários campos especiais.
desktop	Uma janela usada para representar um sistema como um todo, que frequentemente contém outras janelas.
workspace	Uma janela usada para representar um projeto ou aplicativo que pode conter outras janelas, tipicamente com uma barra de título que mostra o nome do projeto ou aplicativo.
document	Uma janela usada para representar um documento do usuário, tipicamente com uma barra de título que mostra seu nome. Também pode ser usada para representar pastas ou diretórios em um sistema de arquivos.
tooltip	Uma janela usada para exibir temporariamente informações ou ajuda sobre um objeto. Também chamada de "info" nas cores do sistema CSS2.
dialogue	Uma janela usada para apresentar uma notificação ou alternativas para o usuário escolher como parte de uma ação realizada pelo usuário. Também chamada de "message-box" nas fontes do sistema CSS2.
push-button	Um botão que tem uma borda ao redor, frequentemente biselada para parecer tridimensional, como se estivesse elevada. Também chamada de "caption" nas fontes do sistema CSS2.
hyperlink	Um botão que representa um hyperlink, frequentemente tão simples quanto texto normal sublinhado e talvez colorido de forma diferente.
radio-button	Um botão que exibe se está ou não marcado com um pequeno círculo ao lado do rótulo do botão. Pode haver um disco dentro do círculo quando o botão está marcado. Um estado indeterminado (nem marcado nem desmarcado) pode ser indicado com algum outro gráfico no círculo.
checkbox	O elemento é desenhado como um checkbox, incluindo apenas a parte real do "checkbox".
menu-item	Uma escolha dentro de um menu, que também pode atuar como rótulo para um menu aninhado (hierárquico).
tab	Um botão representando o rótulo de um painel em uma interface com abas.
menubar	Um menu de menus, tipicamente organizado linearmente, em uma barra horizontal.
outline-tree	Um menu onde as opções podem ser mostradas ou ocultadas com pequenos widgets, frequentemente representados por um pequeno triângulo ou sinais de mais e menos.
range	Um controle que exibe a opção atual, talvez graficamente, e permite ao usuário selecionar outras opções, talvez arrastando um controle deslizante ou girando um botão.
signature	Um campo para inserir uma assinatura.
password	Um campo para inserir uma senha. Tipicamente o texto é renderizado como um conjunto de pontos ou caixas para ocultar o valor.
initial	Faz a propriedade usar seu valor padrão.
inherit	Herda a propriedade do elemento pai.

Propriedades relacionadas

outline — restaure um indicador de foco visível após remover o estilo nativo.
border-radius — arredonde os cantos dos seus controles personalizados.
cursor — sinalize interatividade em controles reestilizados.
::before e content — insira marcas de verificação e ícones em controles personalizados.
Propriedades CSS3 — visão geral do conjunto de recursos CSS3 ao qual appearance pertence.

Prática

Qual é a função da propriedade appearance do CSS?

É usada para alterar o estilo padrão do sistema em controles de formulário.É usada para alterar a cor de fundo de uma página.Automatiza o processo de validação de formulários.Oferece uma forma de aplicar estilização nativa baseada na plataforma do usuário.É usada para criar animações em CSS.

Quando usar appearance

Sintaxe

Exemplo: um checkbox personalizado

Exemplo: um dropdown select personalizado

Valores

Propriedades relacionadas

Prática

Quando usar `appearance`