Propriedade CSS appearance

A propriedade appearance em CSS é utilizada para controlar o aspeto dos controlos de formulário, como botões, caixas de seleção, botões de opção e outros. Permite alterar o estilo dos controlos nativos da interface do utilizador, proporcionando um aspeto e uma apresentação consistentes em diferentes browsers e dispositivos. No desenvolvimento web moderno, appearance: none é o principal caso de utilização para personalizar controlos de formulário, ao passo que os outros valores estão, na sua maioria, descontinuados ou são não-padrão.

As propriedades -webkit-appearance e -moz-appearance são extensões proprietárias dos fabricantes utilizadas para aplicar uma estilização nativa da plataforma com base no tema do sistema operativo. Não fazem parte da especificação CSS oficial do W3C e são suportadas principalmente pelos browsers baseados em WebKit (Safari, Chrome) e em Gecko (Firefox), respetivamente.

Se esta propriedade for utilizada em sites, deve ser testada com cautela. A implementação da propriedade appearance pode ser bastante diferente, sobretudo nos browsers mais antigos. Já nos browsers mais recentes, existem apenas pequenas diferenças.

Aviso

Note que a propriedade "appearance" não é suportada por todos os browsers e o seu comportamento pode variar consoante o browser e o sistema operativo. Além disso, alterar o aspeto dos controlos de formulário pode afetar a usabilidade e a acessibilidade do seu site, pelo que é importante utilizá-la com critério.

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

Sintaxe

Sintaxe da propriedade CSS appearance

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 browsers modernos. Os restantes valores estão, na sua maioria, obsoletos ou são não-padrão.

Exemplo da propriedade appearance:

Exemplo da propriedade CSS appearance com o valor button

<!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 »

Neste exemplo, primeiro removemos o aspeto predefinido da caixa de seleção definindo a propriedade appearance como none. Em seguida, definimos o aspeto personalizado da caixa de seleção através de regras CSS.

A caixa de seleção tem uma largura e uma altura de 20 pixels, uma borda sólida de 2 pixels e um border-radius de 3 pixels para lhe dar cantos arredondados. Definimos também a propriedade outline como none para remover o contorno que aparece à volta da caixa de seleção quando esta recebe o foco.

Para mostrar uma marca de verificação quando a caixa de seleção está selecionada, utilizamos o pseudo-elemento ::before no elemento <label> adjacente, para criar uma caixa de conteúdo com o símbolo Unicode da marca de verificação (\2714) como conteúdo. Atribuímos a esta caixa uma largura e uma altura de 20 pixels, uma cor de fundo #333 e um border-radius de 2 pixels para que pareça um quadrado arredondado. Definimos também a cor do texto como branco para que a marca de verificação se destaque sobre o fundo escuro.

Nota

Para uma personalização simples da cor dos controlos de formulário, o CSS moderno recomenda a utilização da propriedade accent-color em vez de appearance: none. Requer menos código e mantém as funcionalidades nativas de acessibilidade.

Valores

Nota

Apenas none e auto são padrão e amplamente suportados. Os restantes valores estão, na sua maioria, obsoletos ou são não-padrão nos browsers modernos.

Valor	Descrição
none	Remove toda a estilização específica da plataforma. Nota: `normal` é o verdadeiro valor inicial, não `none`.
auto	O user agent seleciona a estilização especial apropriada com base no elemento. Funciona como none em elementos sem estilização especial.
icon	Uma pequena imagem que representa um objeto, muitas vezes com um nome ou etiqueta.
window	Uma viewport, uma superfície emoldurada utilizada para apresentar objetos e conteúdos para visualização e interação do utilizador.
button	Um pequeno objeto, normalmente etiquetado com texto, que representa uma escolha do utilizador.
menu	Um conjunto de opções entre as quais o utilizador pode escolher, eventualmente mais do que uma de cada vez. Existem vários tipos específicos de menus.
field	Uma área disponibilizada para o utilizador introduzir ou editar um valor, normalmente utilizando um teclado. Existem vários campos especiais.
desktop	Uma janela utilizada para representar um sistema como um todo, que muitas vezes contém outras janelas.
workspace	Uma janela utilizada para representar um projeto ou uma aplicação que pode conter outras janelas, normalmente com uma barra de título que mostra o nome do projeto ou da aplicação.
document	Uma janela utilizada para representar um documento do utilizador, normalmente com uma barra de título que mostra o seu nome. Também pode ser utilizada para representar pastas ou diretórios num sistema de ficheiros.
tooltip	Uma janela utilizada para apresentar temporariamente informações ou ajuda sobre um objeto. Também chamada "info" nas cores de sistema CSS2.
dialogue	Uma janela utilizada para apresentar uma notificação ou alternativas para o utilizador escolher como parte de uma ação tomada pelo utilizador. Também chamada "message-box" nos tipos de letra de sistema CSS2.
push-button	Um botão com uma borda à sua volta, muitas vezes biselada para parecer tridimensional, como se estivesse em relevo. Também chamado "caption" nos tipos de letra de sistema CSS2.
hyperlink	Um botão que representa uma ligação de hipertexto, muitas vezes tão simples como texto normal sublinhado e eventualmente com uma cor diferente.
radio-button	Um botão que indica se está selecionado ou não através de um pequeno círculo junto à etiqueta do botão. Pode haver um disco dentro do círculo quando o botão está selecionado. Um estado indeterminado (nem selecionado nem desmarcado) pode ser indicado com algum outro elemento gráfico no círculo.
checkbox	O elemento é desenhado como uma caixa de seleção, incluindo apenas a parte efetiva da "caixa".
menu-item	Uma escolha dentro de um menu, que também pode funcionar como etiqueta para um menu aninhado (hierárquico).
tab	Um botão que representa a etiqueta de um painel numa interface com separadores.
menubar	Um menu de menus, normalmente dispostos linearmente, numa barra horizontal.
outline-tree	Um menu em que as opções podem ser mostradas ou ocultadas através de pequenos widgets, muitas vezes representados por um pequeno triângulo ou pelos sinais de mais e menos.
range	Um controlo que mostra a opção atual, eventualmente de forma gráfica, e permite ao utilizador selecionar outras opções, por exemplo arrastando um cursor ou rodando um botão.
signature	Um campo para introduzir uma assinatura.
password	Um campo para introduzir uma palavra-passe. Normalmente, o texto é apresentado como um conjunto de pontos ou caixas para ocultar o valor.
initial	Faz com que a propriedade utilize o seu valor predefinido.
inherit	Herda a propriedade do seu elemento pai.

Prática

What is the function of the CSS appearance property?

It is used to change the default system styling of form controls.It is used to change the background color of a page.It automates the form validation process.It provides a way to apply native styling based on the user's platform.It is used to create animations in CSS.