Eliminando los estilos nativos de elementos con CSS all: unset

Ya has pasado por esto: quieres un botón con estilos personalizados, así que empiezas a sobrescribir los valores por defecto del navegador propiedad por propiedad. border: none. background: none. padding: 0. cursor: pointer. Funciona, pero se siente mal — como si estuvieras jugando al “whack-a-mole” con la hoja de estilos del agente de usuario.

Existe un enfoque más limpio: la propiedad CSS all. Específicamente, all: unset. Este artículo explica exactamente qué hace, cuándo usarla y qué rompe silenciosamente — incluidos los estilos de foco de los que dependen los usuarios de teclado.

Qué hace realmente all: unset en la cascada CSS

La propiedad all es un shorthand que establece todas las propiedades CSS a la vez, excepto unicode-bidi, direction y las propiedades personalizadas de CSS. Según MDN, all: unset aplica la siguiente regla a cada propiedad:

• Si la propiedad es heredable (como color, font-size, line-height), hereda de su padre.
• Si la propiedad no es heredable (como display, border, background, padding), vuelve al valor inicial de la especificación CSS.

Esa es una distinción crítica. all: unset no restaura los valores predeterminados del navegador. Restablece las propiedades no heredables a los valores predeterminados de su especificación — que no son lo mismo. Un <button> estilizado con all: unset no se verá como un botón sencillo del navegador. Perderá por completo su display, appearance, borde, padding y anillo de foco.

Los cuatro valores de la propiedad all

Para componentes de UI personalizados, normalmente all: unset es lo que quieres. Si necesitas deshacer las sobrescrituras de tu propia hoja de estilos manteniendo intactos los valores predeterminados del navegador, all: revert es la mejor opción.

Cómo resetear un botón de la manera correcta

Aquí hay un patrón práctico de reset de botón que elimina los estilos nativos del elemento sin romper la accesibilidad:

.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;
}

La regla :focus-visible no es negociable. all: unset elimina el anillo de foco predeterminado del navegador, lo que significa que los usuarios de teclado pierden su único indicador visual de dónde está el foco. Restaurarlo con :focus-visible sigue las heurísticas del navegador para mostrar un indicador de foco visible cuando corresponde, habitualmente durante la navegación con teclado, sin mostrar siempre el contorno con clics del ratón.

all: unset vs. appearance: none — No son lo mismo

Esta es una fuente común de confusión. appearance: none solo elimina el renderizado nativo a nivel del sistema operativo de los controles de formulario — el chrome específico de la plataforma que hace que un <select> se vea como un desplegable de macOS o un combo box de Windows. No afecta al layout, espaciado, color ni a ninguna otra propiedad CSS.

all: unset es un reset amplio de la cascada CSS. Afecta a todo (con las pequeñas excepciones mencionadas).

Para controles de formulario nativos como <select>, <input> y <textarea>, a menudo necesitas 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;
}

Ten en cuenta que algunos navegadores también requieren el prefijo -webkit-appearance: none para una compatibilidad completa entre navegadores en versiones antiguas de Safari e iOS. La compatibilidad de navegadores tanto para all como para appearance es sólida en los navegadores modernos.

Cuándo no usar all: unset

Evita all: unset en elementos donde solo necesites cambiar unas pocas propiedades. Es un instrumento contundente. Si solo quieres eliminar el fondo y el borde de un botón, modifica esas propiedades directamente — es menos probable que produzca efectos secundarios inesperados.

Evítalo también en elementos contenedores. Resetear display en un padre flex o grid colapsará tu layout silenciosamente.

Conclusión

all: unset es un atajo poderoso para eliminar los estilos nativos de botones, enlaces y controles de formulario — pero resetea todo, incluidas propiedades que probablemente quieras conservar. Restaura siempre display, box-sizing, cursor y, especialmente, :focus-visible después de usarlo. Combínalo con appearance: none cuando trabajes con controles de formulario nativos que tienen renderizado a nivel del sistema operativo. Usado con cuidado, es una de las herramientas más limpias del CSS moderno para construir componentes de UI personalizados desde cero.

Preguntas frecuentes

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..