La propiedad -webkit-appearance en CSS es utilizada por navegadores basados en WebKit como Safari. Tenga en cuenta que Firefox y Edge también son compatibles con -webkit-appearance , por motivos de compatibilidad. Aunque, la propiedad -webkit-appearance es compatible con algunos navegadores modernos, pero todavía hay una pequeña diferencia.
Sintaxis:
element{
webkit-appearance:values;
}
Valor de los parámetros: Algunas listas de los valores de las propiedades de apariencia -webkit- son:
Valores de esta Propiedad |
|||
|---|---|---|---|
|
caja |
radio |
presionar el botón |
botón cuadrado |
|
botón |
botón-bisel |
cuadro de lista |
elemento de lista |
|
lista de menús |
botón de lista de menús |
texto de la lista de menús |
menulist-textfield |
|
barra de desplazamientobotón hacia arriba |
barra de desplazamientobotón abajo |
scrollbarbutton-izquierda |
barra de desplazamientobotón-derecha |
|
scrollbartrack-horizontal |
scrollbartrack-vertical |
scrollbarthumb-horizontal |
scrollbarthumb-vertical |
|
scrollbargripper-horizontal |
scrollbargripper-vertical |
deslizador-horizontal |
deslizador-vertical |
|
corredera-horizontal |
sliderthumb-vertical |
signo de intercalación |
campo de búsqueda |
|
decoración del campo de búsqueda |
searchfield-resultados-decoración |
botón de resultados del campo de búsqueda |
botón-cancelar-campo-de-búsqueda |
|
campo de texto |
área de texto |
|
|
Nota: Algunos de los valores no son compatibles con Safari 4.0.
De la lista anterior, algunos valores de propiedad están obsoletos en los navegadores modernos. CSS3 tiene una propiedad de apariencia equivalente a la propiedad -webkit-appearance basada en la compatibilidad del navegador. Como -webkit- se reemplaza por -ms- para Internet Explorer, -moz- para Firefox, -o- para Opera, etc. La propiedad -webkit-appearance también es compatible con Safari 3.0 e iOS 1.0 y sus versiones posteriores.
Ejemplo 1: El siguiente ejemplo ilustra la propiedad CSS -webkit-appearance basada en la compatibilidad de diferentes navegadores.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<style>
h2 {
/* WebKit */
-webkit-appearance: button !important;
/* Mozilla */
-moz-appearance: button;
/* Opera */
-o-appearance: button;
/* Internet Explorer */
-ms-appearance: button;
/* CSS3 */
appearance: button;
width: 400px;
padding: 1em;
color: #f00;
}
</style>
</head>
<body>
<center>
<h1 style="color:green; padding:13px;">
GeeksforGeeks
</h1>
<p>Webkit-Appearance Button of HTML H2 tag</p>
<br>
<h2>Welcome to GeeksforGeeks</h2>
<p>HTML Button tag</p>
<br>
<br>
<button>Welcome to GeeksforGeeks</button>
</center>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo ilustra la propiedad CSS -webkit-appearance basada en la compatibilidad del navegador.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<style>
#webkit {
/* WebKit */
-webkit-appearance: slider-vertical !important;
/* Mozilla */
-moz-appearance: slider-vertical;
/* Opera */
-o-appearance: slider-vertical;
/* Internet Explorer */
-ms-appearance: slider-vertical;
/* CSS3 */
appearance: slider-vertical;
}
</style>
</head>
<body>
<center>
<h1 style="color:green; padding:13px;">
GeeksforGeeks
</h1>
<p>
Webkit-Appearance slider-vertical of HTML
input[type=range] tag
</p>
<br>
<br>
<input id="webkit" type="range" min="0" max="10" />
<br>
<br>
<p>Normal HTML input[type=range] tag</p>
<br>
<br>
<input type="range" min="0" max="10" /> </center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por VigneshKannan3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA