Propiedad CSS appearance

La propiedad appearance en CSS se utiliza para controlar la apariencia de los controles de formulario como botones, casillas de verificación, botones de opción y otros. Permite cambiar el estilo de los controles nativos de la interfaz de usuario, proporcionando una apariencia consistente en diferentes navegadores y dispositivos. En el desarrollo web moderno, appearance: none es el caso de uso principal para personalizar controles de formulario, mientras que otros valores están en gran medida obsoletos o no son estándar.

Las propiedades -webkit-appearance y -moz-appearance son extensiones propietarias de los proveedores que se utilizan para aplicar estilos nativos de la plataforma basados en el tema del sistema operativo. No forman parte de la especificación oficial CSS del W3C y son compatibles principalmente con los navegadores basados en WebKit (Safari, Chrome) y los basados en Gecko (Firefox), respectivamente.

Si esta propiedad se usa en sitios web, debe probarse con cautela. La implementación de la propiedad appearance puede ser bastante diferente, especialmente en navegadores más antiguos. Pero en los navegadores más recientes, las diferencias son pequeñas.

Advertencia

Ten en cuenta que la propiedad "appearance" no es compatible con todos los navegadores y su comportamiento puede variar según el navegador y el sistema operativo. Además, cambiar la apariencia de los controles de formulario puede afectar la usabilidad y la accesibilidad de tu sitio web, por lo que es importante usarla con prudencia.

Valor inicial	normal
Se aplica a	Todos los elementos.
Heredada	No.
Animable	Sí.
Versión	CSS3
Sintaxis DOM	object.style.appearance = "none";

Cuándo usar `appearance`

En la práctica, se recurre a appearance en una situación: cuando se quiere cambiar completamente el estilo de un control de formulario y el aspecto nativo del navegador interfiere. Establecer appearance: none elimina el renderizado nativo de un elemento como una casilla de verificación, un botón de opción, un desplegable <select> o un campo de texto, dejando un lienzo en blanco para dar estilo con los bordes, colores y pseudoelementos propios.

La contrapartida es la responsabilidad. Los controles nativos incluyen de forma gratuita anillos de enfoque, comportamiento de teclado y convenciones de plataforma. Una vez que se elimina la apariencia nativa, hay que reconstruir los estados visuales (enfoque, seleccionado, deshabilitado) manualmente, o el control se vuelve confuso e inaccesible. Por esa razón:

Usa appearance: none cuando genuinamente necesites un control con estilo personalizado y estés preparado para gestionar sus estados y accesibilidad.
Para un ajuste rápido de color (el color del tilde o relleno de una casilla de verificación, botón de opción o control deslizante de rango), prefiere la propiedad accent-color — mantiene la accesibilidad nativa y requiere mucho menos código.

Sintaxis

Sintaxis de la propiedad 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

Solo none y auto tienen amplia compatibilidad en los navegadores modernos. Los valores restantes están en gran medida obsoletos o no son estándar.

Ejemplo: una casilla de verificación personalizada

El siguiente ejemplo elimina el renderizado nativo de la casilla de verificación con appearance: none y lo reconstruye como un cuadro con estilo que muestra una marca de verificación cuando está seleccionado.

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

Pruébalo tú mismo »

Cómo funciona:

appearance: none (con los prefijos -webkit- y -moz- para navegadores más antiguos) elimina el renderizado predeterminado de la casilla de verificación para que podamos darle estilo nosotros mismos.
La casilla de verificación obtiene un ancho y alto de 20px, un borde sólido de 2px y un border-radius de 3px para esquinas redondeadas. Establecer outline en none elimina el anillo de enfoque predeterminado (en código real, reemplázalo con tu propio estilo de enfoque visible para la accesibilidad).
Cuando la casilla está marcada, el pseudoelemento ::before en el <label> adyacente inserta el símbolo Unicode de marca de verificación (\2714) dentro de un cuadro oscuro, usando un color de texto blanco para que el tilde destaque sobre el background-color.

Nota

Para una personalización de color sencilla de los controles de formulario, el CSS moderno recomienda usar la propiedad accent-color en lugar de appearance: none. Requiere menos código y mantiene las funciones de accesibilidad nativas.

Ejemplo: un desplegable select personalizado

Un uso muy común de appearance: none es eliminar la flecha y el estilo predeterminados de un <select> para poder añadir tu propia flecha con una imagen de fondo y controlar el relleno y el borde.

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

Sin appearance: none, el navegador mantiene su flecha desplegable nativa y no es posible reemplazarla de forma fiable. Al eliminarla, el cursor y la flecha personalizada quedan completamente bajo tu control.

Valores

Nota

Solo none y auto son estándar y tienen amplia compatibilidad. Los valores restantes están en gran medida obsoletos o no son estándar en los navegadores modernos.

Valor	Descripción
none	Elimina todos los estilos específicos de la plataforma. Nota: `normal` es el valor inicial real, no `none`.
auto	El agente de usuario selecciona el estilo especial apropiado según el elemento. Actúa como none en elementos sin estilo especial.
icon	Una pequeña imagen que representa un objeto, a menudo con un nombre o etiqueta.
window	Un viewport, una superficie enmarcada utilizada para presentar objetos y contenido para la visualización e interacción del usuario.
button	Un pequeño objeto generalmente etiquetado con texto que representa una opción del usuario.
menu	Un conjunto de opciones entre las que el usuario puede elegir, posiblemente más de una a la vez. Existen varios tipos específicos de menús.
field	Un área destinada a que el usuario introduzca o edite un valor, normalmente mediante el teclado. Existen varios campos especiales.
desktop	Una ventana utilizada para representar un sistema en su conjunto, que a menudo contiene otras ventanas.
workspace	Una ventana utilizada para representar un proyecto o aplicación que puede contener otras ventanas, normalmente con una barra de título que muestra el nombre del proyecto o aplicación.
document	Una ventana utilizada para representar un documento del usuario, normalmente con una barra de título que muestra su nombre. También puede utilizarse para representar carpetas o directorios en un sistema de archivos.
tooltip	Una ventana que se utiliza para mostrar temporalmente información o ayuda sobre un objeto. También se denomina "info" en los colores de sistema CSS2.
dialogue	Una ventana utilizada para presentar una notificación o alternativas entre las que el usuario puede elegir como parte de una acción realizada por el usuario. También se denomina "message-box" en las fuentes del sistema CSS2.
push-button	Un botón con un borde alrededor, a menudo biselado para parecer tridimensional, como si estuviera elevado. También se denomina "caption" en las fuentes de sistema CSS2.
hyperlink	Un botón que representa un enlace de hipertexto, a menudo tan simple como texto normal subrayado y quizás de un color diferente.
radio-button	Un botón que muestra si está o no marcado con un pequeño círculo junto a la etiqueta del botón. Puede haber un disco dentro del círculo cuando el botón está marcado. Un estado indeterminado (ni marcado ni desmarcado) puede indicarse con algún otro gráfico en el círculo.
checkbox	El elemento se dibuja como una casilla de verificación, incluyendo solo la parte de la "casilla" en sí.
menu-item	Una opción dentro de un menú, que también puede actuar como etiqueta para un menú anidado (jerárquico).
tab	Un botón que representa la etiqueta de un panel en una interfaz con pestañas.
menubar	Un menú de menús, normalmente dispuesto linealmente en una barra horizontal.
outline-tree	Un menú donde las opciones pueden mostrarse u ocultarse con pequeños controles, representados a menudo por un pequeño triángulo o signos de más y menos.
range	Un control que muestra la opción actual, posiblemente de forma gráfica, y permite al usuario seleccionar otras opciones, quizás arrastrando un control deslizante o girando un mando.
signature	Un campo para introducir una firma.
password	Un campo para introducir una contraseña. Normalmente el texto se representa como un conjunto de puntos o cuadros para ocultar el valor.
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Propiedades relacionadas

outline — restaura un indicador de enfoque visible tras eliminar el estilo nativo.
border-radius — redondea las esquinas de tus controles personalizados.
cursor — señala la interactividad en controles con estilo personalizado.
::before y content — inserta marcas de verificación e iconos en controles personalizados.
Propiedades CSS3 — descripción general del conjunto de características CSS3 al que pertenece appearance.

Práctica

¿Cuál es la función de la propiedad CSS appearance?

Se utiliza para cambiar el estilo predeterminado del sistema en los controles de formulario.Se utiliza para cambiar el color de fondo de una página.Automatiza el proceso de validación de formularios.Proporciona una forma de aplicar estilos nativos según la plataforma del usuario.Se utiliza para crear animaciones en CSS.

Cuándo usar appearance

Sintaxis

Ejemplo: una casilla de verificación personalizada

Ejemplo: un desplegable select personalizado

Valores

Propiedades relacionadas

Práctica

Cuándo usar `appearance`