Removendo Estilos Nativos de Elementos com CSS all: unset

Você já passou por isso: quer um botão com estilo personalizado, então começa a sobrescrever os padrões do navegador, uma propriedade de cada vez. border: none. background: none. padding: 0. cursor: pointer. Funciona, mas parece errado — como se estivesse jogando “bata na toupeira” com a folha de estilos do user agent.

Existe uma abordagem mais limpa: a propriedade CSS all. Mais especificamente, all: unset. Este artigo explica exatamente o que ela faz, quando usá-la e o que ela silenciosamente quebra — incluindo os estilos de foco dos quais os usuários de teclado dependem.

O Que all: unset Realmente Faz na Cascata CSS

A propriedade all é um atalho que define todas as propriedades CSS de uma só vez, exceto unicode-bidi, direction e propriedades CSS personalizadas. De acordo com a MDN, all: unset aplica a seguinte regra a cada propriedade:

• Se a propriedade for herdada (como color, font-size, line-height), ela herda do seu pai.
• Se a propriedade não for herdada (como display, border, background, padding), ela volta ao valor inicial definido na especificação CSS.

Essa é uma distinção fundamental. all: unset não restaura os padrões do navegador. Ela redefine as propriedades não herdadas aos padrões da especificação — que não são a mesma coisa. Um <button> estilizado com all: unset não vai parecer um botão comum do navegador. Ele perderá completamente seu display, appearance, borda, padding e anel de foco.

Os Quatro Valores da Propriedade all

Para componentes de UI personalizados, all: unset é geralmente o que você quer. Se precisar desfazer suas próprias sobrescritas de folha de estilos mantendo os padrões do navegador intactos, all: revert é a melhor escolha.

Resetando um Botão da Maneira Correta

Aqui está um padrão prático de reset de botão que remove o estilo nativo do elemento sem comprometer a acessibilidade:

.button-reset {
  all: unset;

  /* Restore safe defaults */
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;

  /* Your custom styles */
  padding: 0.5rem 1rem;
  background: #0070f3;
  color: white;
  border-radius: 4px;
}

/* Always restore focus visibility for keyboard users */
.button-reset:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: 3px;
}

A regra :focus-visible é inegociável. all: unset remove o anel de foco padrão do navegador, o que significa que usuários de teclado perdem seu único indicador visual de onde está o foco. Restaurá-lo com :focus-visible segue a heurística do navegador para quando um indicador de foco visível deve ser exibido, comumente durante a navegação por teclado, sem mostrar o contorno sempre em cliques do mouse.

all: unset vs. appearance: none — Eles Não São a Mesma Coisa

Essa é uma fonte comum de confusão. appearance: none remove apenas a renderização nativa em nível de sistema operacional dos controles de formulário — o chrome específico da plataforma que faz um <select> parecer um dropdown do macOS ou uma combo box do Windows. Ela não altera layout, espaçamento, cor ou qualquer outra propriedade CSS.

all: unset é um reset amplo da cascata CSS. Ela afeta tudo (com as pequenas exceções já mencionadas).

Para controles de formulário nativos como <select>, <input> e <textarea>, muitas vezes você precisa de ambos:

select {
  all: unset;
  appearance: none; /* Removes OS-level control rendering */
  display: block;
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  cursor: pointer;
}

select:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: 2px;
}

Observe que alguns navegadores também exigem o prefixo -webkit-appearance: none para suporte cross-browser completo em versões mais antigas do Safari e do iOS. O suporte dos navegadores tanto para all quanto para appearance é sólido entre os navegadores modernos.

Quando Não Usar all: unset

Evite all: unset em elementos nos quais você precisa alterar apenas algumas propriedades. É um instrumento contundente. Se você só quer remover o fundo e a borda de um botão, mire diretamente nessas propriedades — é menos provável que isso produza efeitos colaterais inesperados.

Evite também usá-la em elementos contêineres. Redefinir display em um pai flex ou grid vai colapsar seu layout silenciosamente.

Conclusão

all: unset é um atalho poderoso para remover o estilo nativo de elementos como botões, links e controles de formulário — mas redefine tudo, incluindo propriedades que você provavelmente quer manter. Sempre restaure display, box-sizing, cursor e, especialmente, :focus-visible após usá-la. Combine-a com appearance: none ao trabalhar com controles de formulário nativos que têm renderização em nível de sistema operacional. Usada com cuidado, é uma das ferramentas mais limpas do CSS moderno para construir componentes de UI personalizados do zero.

Perguntas Frequentes

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..