Vamos aprender quando usar appearance: none para resolver problemas de estilo em campos de busca, caixas de seleção e botões de opção. Os navegadores aplicam estilos padrão a muitos elementos. No caso de elementos de entrada, sua capacidade de estilizar eles com CSS pode parecer bastante restrita. Então, você pode querer usar appearance: none para ocultar aspectos do elemento padrão e construir o seu próprio no lugar. Por exemplo, isso ocultaria as caixas de seleção padrão para um input do tipo checkbox permitindo que você use indicadores personalizados como um tique verde e um X vermelho para mostrar o estado. Para um campo de busca, navegadores baseados em WebKit mostrarão um ícone de busca padrão e um botão de cancelar. Ocultar isso permite que você crie seus próprios indicadores que apareceriam em todos os navegadores. Aqui está um exemplo de uma checkbox personalizada: NOTA: Parte do CSS neste exemplo usa propriedades que ainda não foram abordadas. Isso é apenas para dar uma ideia de como criar uma checkbox personalizada. Você aprenderá como tudo isso funciona em futuras aulas e workshops.

<link rel="stylesheet" href="styles.css" />
<form>
  <label>
    <input class="checkbox" type="checkbox" /> Agree
  </label>
</form>

.checkbox {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  transition: all 0.25s ease;
  vertical-align: middle; 
}

.checkbox:hover {
  border-color: #888;
}

.checkbox:checked {
  background-color: #4caf50;
  border-color: #4caf50;
}

.checkbox:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox:focus {
  outline: 2px solid #90caf9;
  outline-offset: 2px;
}

WebKit é um motor de software que ajuda os navegadores a exibirem sites. Navegadores como Safari usam WebKit para garantir que as páginas da web apareçam e funcionem corretamente. Esta propriedade CSS appearance: none oferece controle completo sobre o estilo, mas traz algumas coisas para ficar atento. Os componentes interativos padrão dos elementos de input incluem recursos como indicadores de foco e erro que você precisará garantir que não sejam perdidos. Criar um estilo consistente entre plataformas é uma ótima razão para usar essa propriedade. Você também pode usá-lo para garantir que os alvos de toque em um dispositivo móvel sejam grandes o suficiente ou que as cores de uma caixa de seleção tenham contraste suficiente.