La appearancepropiedad se usa para mostrar un elemento usando un estilo nativo de la plataforma basado en el tema del sistema operativo del usuario.
.thing ( -webkit-appearance: value; -moz-appearance: value; appearance: value; )Esto está comenzando a no tener prefijos, lo cual es genial porque la historia entre navegadores aquí es muy complicada.
La appearancepropiedad se utiliza por una de dos razones:
- Para aplicar un estilo específico de la plataforma a un elemento que no lo tiene de forma predeterminada
- Para eliminar el estilo específico de la plataforma a un elemento que lo tiene de forma predeterminada
Por ejemplo, las entradas con un type=searchnavegador WebKit por defecto tienen esquinas redondeadas y son muy estrictas en lo que puede modificar mediante CSS. Si no desea ese estilo, puede quitarlo de una sola vez con apariencia.
input(type=search) ( -webkit-appearance: none; )O puede tomar una entrada con type = text y hacer que parezca una entrada de búsqueda:
input(type=text) ( -webkit-appearance: searchfield; )Valores de WebKit
- caja
- radio
- presionar el botón
- botón cuadrado
- botón
- bisel de botones
- cuadro de lista
- listitem
- menulista
- botón menulista
- texto-menulista
- campo de texto menulista
- barra de desplazamiento
- barra de desplazamiento hacia abajo
- scrollbarbutton-left
- scrollbarbutton-right
- scrollbartrack-horizontal
- scrollbartrack-vertical
- scrollbarthumb-horizontal
- scrollbarthumb-vertical
- barra de desplazamiento pinza-horizontal
- barra de desplazamiento vertical
- deslizador-horizontal
- deslizador vertical
- tobogán-horizontal
- tobogán vertical
- signo de intercalación
- campo de búsqueda
- decoración de campo
- búsqueda-resultados-decoración
- botón de resultados de campo de búsqueda
- campo-de-búsqueda-cancelar-botón
- campo de texto
- textarea
Valores de Mozilla
- ninguno
- botón
- caja
- casilla-contenedor
- casilla de verificación pequeña
- diálogo
- cuadro de lista
- opción del menú
- menulista
- botón menulista
- campo de texto menulista
- menú emergente
- barra de progreso
- radio
- contenedor de radio
- radio-pequeño
- redimensionar
- barra de desplazamiento
- barra de desplazamiento hacia abajo
- scrollbarbutton-left
- scrollbarbutton-right
- barra de desplazamiento
- scrollbartrack-horizontal
- scrollbartrack-vertical
- separador
- barra de estado
- pestaña
- tab-left-edge Obsoleto
- tabpanels
- campo de texto
- campo de texto-multilínea
- barra de herramientas
- botón de barra de herramientas
- caja de herramientas
- -moz-mac-barra de herramientas unificada
- -moz-win-borderless-glass
- -moz-win-browsertabbar-toolbox
- -moz-win-communications-toolbox
- -moz-win-glass
- -moz-win-media-toolbox
- información sobre herramientas
- celda de árbol
- flecha de arbol
- árbol
- árbol retorcido
- árbol abierto
- vista de árbol
- ventana
Recursos
- Mozilla Docs para apariencia -moz
- Trent Walton en Apariencia de Webkit
- Shaun Inman sobre la desactivación de la sombra de texto interior de las entradas de texto en iPad
- Especificación CSS3
Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 83 * | 80 | No | 83 * | TP * |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 * | 81 * | 14,0-14,4 * |