En este artículo, vamos a discutir cómo cambiar el color del botón de opción usando la propiedad CSS de color de acento.
La propiedad de color de acento en CSS especifica el color de los elementos/controles de la interfaz de usuario, como casillas de verificación, botones de radio, rango y elementos de progreso. Según este artículo, estamos usando esta propiedad de acento de color para cambiar el color del botón de opción de un color predeterminado. La sintaxis y sus valores de propiedad se dan a continuación
Sintaxis:
accent-color : auto | color | initial | inherit;
Valores de propiedad:
- auto: el navegador establecerá el color de acento para los elementos de control.
- color: especificará el color para un color de acento en representación RGB, representación hexadecimal y también con el nombre del color.
- initial: establece la propiedad de acento de color en el valor predeterminado.
- heredar: hereda la propiedad del componente padre.
Nota: Según el navegador, el color establecido por el valor de la propiedad automática varía.
Ejemplo 1: en el siguiente código, creamos un botón de opción y especificamos el color del botón de opción usando la propiedad de color de acento.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#specifyColor {
accent-color: red;
}
</style>
</head>
<body>
<center>
<h3> Red colored radio button </h3>
<input type="radio" id="specifyColor"
name="radio1" value="GFG">
<label for="specifyColor">GFG</label>
</center>
</body>
</html>
Producción:
Ejemplo 2: En este programa de ejemplo, hemos utilizado varios tipos de propiedades de acento de color especificando el color en diferentes formas, como el nombre del color directamente, utilizando el valor de color RGB, el código de color hexadecimal, etc. para cambiar el color de los botones de opción. .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
input[type=radio]#Yellow {
accent-color: pink;
}
input[type=radio]#Green {
accent-color: rgb(0, 255, 0);
}
input[type=radio]#auto {
accent-color: auto;
}
input[type=radio]#Red {
accent-color: #FF0000;
}
</style>
</head>
<body>
<center>
<h3> Radio button color change </h3>
</center>
<input type="radio" id="Yellow" name="colors" value="Yellow">
<label for="Yellow">Yellow</label><br>
<input type="radio" id="Green" name="colors" value="Green">
<label for="Green">Green using RGB</label><br>
<input type="radio" id="auto" name="colors" value="auto">
<label for="auto">auto-color set by browser</label><br>
<input type="radio" id="Red" name="colors" value="Red">
<label for="Red">Red color using hex representation
</label><br>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rahulkl8471 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA