La propiedad CSS -webkit-appearance se utiliza para controlar el estilo predeterminado de los elementos HTML, anulando los estilos predeterminados del navegador (como botones, campos de entrada o barras de desplazamiento). Es específica de los navegadores basados en WebKit, como Chrome y Safari, y permite que los elementos adopten o ignoren el estilo nativo del sistema operativo.
«Ir a indice»
Sintaxis
elemento{
webkit-appearance:values;
}
«Ir a indice»
Valor de los parámetros
Algunos valores de las propiedades de apariencia de -webkit- son:
Valores de esta propiedad | |||
|---|---|---|---|
caja | radio | pulsador | botón cuadrado |
boton | boton biselado | cuadro de lista | elemento de lista |
lista de menú | botón de lista de menú | texto de lista de menú | campo de lista de menú |
botón de barra de desplazamiento hacia arriba | botón de barra de desplazamiento hacia abajo | botón de barra de desplazamiento izquierda | botón de barra de desplazamiento derecha |
barra de desplazamiento horizontal | barra de desplazamiento vertical | barra de desplazamiento horizontal | barra de desplazamiento vertical |
pinza de barra de desplazamiento horizontall | barra de desplazamiento vertical | control deslizante horizontal | control deslizante vertical |
deslizador pulgar horizontal | deslizador pulgar vertical | signo de intercalación | campo de búsqueda |
decoración del campo de búsqueda | resultados del campo de búsqueda decoración | botón de resultados del campo de búsqueda | botón de cancelación del campo de búsqueda |
campo de texto | área de texto |
|
|
«Ir a indice»
Nota: Algunos de los valores no son compatibles con Safari 4.0.
Preguntas frecuentes sobre CSS-webkit-appearance:
¿Cómo elimino los estilos predeterminados usando -webkit-appearance?
Establezca -webkit-appearance: none para eliminar los estilos predeterminados y aplicar CSS personalizado.
¿Cuáles son los valores disponibles para -webkit-appearance?
Los valores comunes incluyen ninguno, botón, campo de texto, casilla de verificación y radio, entre otros.
¿-webkit-appearance funciona en todos los navegadores?
Funciona principalmente en navegadores basados en WebKit, como Chrome y Safari, pero es posible que no sea compatible con todos los navegadores.
¿Cómo hacer que un botón parezca un enlace usando -webkit-appearance?
Utilice -webkit-appearance: none y diseñe el botón para que parezca un enlace usando estilos de texto.
¿Se puede utilizar -webkit-appearance para darle estilo a los campos de entrada?
Sí, se puede utilizar para cambiar o eliminar la apariencia predeterminada de los campos de entrada.
«Ir a indice»
Bibliografia:
https://www.geeksforgeeks.org/css-webkit-appearance/
