Definición de .accent-color en CSS
La propiedad .accent-color en CSS es capaz de volver a tintar el color acentuado de los controles de formulario proporcionados por los estilos predeterminados del navegador con un valor de color personalizado.
Ejemplo de uso de accent-color
Si quieres utilizar esta propiedad de CSS en tu hoja styles.css, hazlo de esta forma:
.element {
accent-color: #f8a100;
}Otro ejemplo más avanzado de .accent-color es el siguiente de CODEPEN:
Sintaxis de .accent-color en CSS
accent-color: auto|color|initial|inherit;Valores
| Valor | Descripción | Manifestación |
|---|---|---|
| auto | Valor por defecto. El navegador elige el color de acento. | |
| color | Especifica el color que se utilizará como color de realce. Se pueden utilizar todos los valores de color legales (rgb, hexadecimal, color con nombre, etc.). Para obtener más información sobre los valores legales, lea nuestro Tutorial de colores CSS | |
| inicial | Establece esta propiedad en su valor predeterminado. | |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .accent-color
Los números de la tabla detallan la primera versión del navegador que es completamente compatible con la propiedad.
Los números seguidos de -webkit- especifican la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| align-content | 21.0 | 11.0 | 28.0 | 9.0 7.0 -webkit- | 12.1 |
Bibliografía
- CSS accent-color (web.dev)
- CSSWG Pull Request #5187 (GitHub)
- accent-color CSS property (Chrome Platform Status)
- Firefox Bug Ticket #1705605 (Mozilla Bugzilla)
- Safari Bug Ticket #227587 (Safari Bugzilla)
- Request for position: accent-color CSS property (Chromium message to Safari)
