CSS - accent-color Property
CSS - accent-color Property
CSS accent-color property determines the accent color that can be applied to user-interface controls such as radio button, checkboxes, buttons etc. This property gives the flexibility to assign color of user’s choice to the user-interface control.
Syntax
CSS CODE
accent-color: auto | color | initial | inherit;| Value | Description |
|---|---|
| auto | The browser selects the accent color. Default value. |
| color | It specifies the color to be used. Different formats (rgb, hex, color-name, etc) can be used. |
| initial | This sets the property to its initial value |
| inherit | This inherits the property from the parent element |
Examples of CSS Accent Color Property
Below examples will explain the accent-color property with different values.
Setting Default Color
To allow the browser to give the color to the user-interface controls, the auto value can be used. This is shown in the example below.
Example
Preview
Customizing Color
To apply color of our choice to the user-interface controls, we can specify the color in different formats. This is shown in the example below. Three different formats have been used - color name, color rgb value and color hexadecimal value.
Example
Preview
Supported Browsers
| Element | |||||
|---|---|---|---|---|---|
| accent-color | 93.0 | 93.0 | 92.0 | 15.4 | 79.0 |