Propiedad CSS appearance

La propiedad appearance en CSS se usa para controlar la apariencia de 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 coherente en distintos navegadores y dispositivos. En el desarrollo web moderno, appearance: none es el principal caso de uso 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 usan para aplicar un estilo nativo de la plataforma según el tema del sistema operativo. No forman parte de la especificación oficial de CSS del W3C y están soportadas principalmente por navegadores basados en WebKit (Safari, Chrome) y 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 antiguos. Pero en los navegadores más nuevos, solo hay pequeñas diferencias.

WARNING

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.

Initial Value	normal
Applies to	All elements.
Inherited	No.
Animatable	Yes.
Version	CSS3
DOM Syntax	object.style.appearance = "none";

Sintaxis

Sintaxis de la propiedad CSS appearance

css

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;

note
Solo none y auto tienen un amplio soporte en los navegadores modernos. Los valores restantes están en gran medida obsoletos o no son estándar.

Ejemplo de la propiedad appearance:

Ejemplo de la propiedad CSS appearance con el valor button

html

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

Try it Yourself »

En este ejemplo, primero eliminamos la apariencia predeterminada de la casilla de verificación estableciendo la propiedad appearance en none. Luego definimos la apariencia personalizada de la casilla de verificación usando reglas CSS.

La casilla de verificación tiene un ancho y una altura de 20 píxeles, un borde sólido de 2 píxeles y un border-radius de 3 píxeles para darle esquinas redondeadas. También establecemos la propiedad outline en none para eliminar el contorno que aparece alrededor de la casilla cuando tiene el foco.

Para mostrar una marca de verificación cuando la casilla está marcada, usamos el pseudoelemento ::before en el <label> adyacente para crear un bloque de contenido con el símbolo Unicode de marca de verificación (\2714) como contenido. Le damos a este bloque un ancho y una altura de 20 píxeles, un color de fondo de #333 y un border-radius de 2 píxeles para que parezca un cuadrado redondeado. También establecemos el color del texto en blanco para que la marca destaque sobre el fondo oscuro.

note
Para una personalización sencilla del color 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 nativas de accesibilidad.

Valores

note
Solo none y auto son estándar y tienen un amplio soporte. Los valores restantes están en gran medida obsoletos o no son estándar en los navegadores modernos.

Value	Description
none	Elimina todo el estilo específico 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 usada para presentar objetos y contenido para la visualización e interacción del usuario.
button	Un pequeño objeto normalmente etiquetado con texto que representa una opción del usuario.
menu	Un conjunto de opciones para que el usuario elija, quizá más de una a la vez. Hay varios tipos específicos de menús.
field	Un área proporcionada para que un usuario introduzca o edite un valor, normalmente usando un teclado. Hay varios campos especiales.
desktop	Una ventana usada para representar un sistema en su conjunto que a menudo contiene otras ventanas.
workspace	Una ventana usada 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 la aplicación.
document	Una ventana usada para representar un documento del usuario, normalmente con una barra de título que muestra su nombre. También puede usarse para representar carpetas o directorios en un sistema de archivos.
tooltip	Una ventana que se usa para mostrar temporalmente información o ayuda sobre un objeto. También se llama "info" en los colores del sistema CSS2.
dialogue	Una ventana usada para presentar una notificación o alternativas para que el usuario elija como parte de una acción realizada por el usuario. También se llama "message-box" en las fuentes del sistema CSS2.
push-button	Un botón que tiene un borde que lo rodea, a menudo biselado para parecer tridimensional, como si estuviera elevado. También se llama "caption" en las fuentes del sistema CSS2.
hyperlink	Un botón que representa un enlace de hipertexto, a menudo tan simple como texto normal subrayado y quizá de un color diferente.
radio-button	Un botón que muestra si está marcado o no 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 real de la "checkbox".
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 widgets, a menudo representados por un pequeño triángulo o signos más y menos.
range	Un control que muestra la opción actual, quizá de forma gráfica, y permite al usuario seleccionar otras opciones, quizá 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 del elemento padre.

Practice

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.

Propiedad CSS appearance ​

Sintaxis ​

Ejemplo de la propiedad appearance: ​

Valores ​

Practice ​

Propiedad CSS appearance

Sintaxis

Ejemplo de la propiedad appearance:

Valores

Practice