everything about web

A Comprehensive Guide to the World of Web Design & Development:

CSS, HTML, Performance, Web Design, and all Aspects of Front-End Development


Simplifying Form Styling with CSS accent-color

The CSS accent-color is a CSS property that sets the accent color used by some user agent controls, such as checkboxes and radio buttons. The accent color is used to highlight important interactive elements, such as the selected item in a list, when the user interacts with them. The accent-color property accepts a color value as its input, and it can be set using the CSS stylesheet or by using JavaScript to dynamically change the accent color on the page

The CSS accent-color is a quick solution to specify theme color in a default form control like: <checkboxes>, <input type ="radio"> , <input type = "range"> and <progress>

The CSS accent-color is supported in most modern browsers. If the browser is unsupported, it will be displayed in default color.

CSS property:accent-color
Value:auto | initial | inherit | color
Initial value:auto

For example:

<form class="form1">
  <input type="checkbox" name="checkbox1" checked />
  <lable for="checkbox1">Checkbox 1</lable>
  <input type="checkbox" name="checkbox2" />
  <lable for="checkbox1">Checkbox 2</lable>
  <input type="radio" value="radio1" checked />
  <label for="radio1">Option 1</label>
  <input type="radio" value="radio2" />
  <label for="radio2">Option 2</label>
<form class="form2">
  <progress value="66" max="100"> 66% </progress>


1. for an individual form element

input[type="radio"] { 
  accent-color: pink;
Declare CSS accent-color in individual form element to control theme color , for example: checkboxes, radio button, range bar, progress bar...

2. for individual form

  accent-color: pink; 
  accent-color: orange; 

3. for the whole document

:root { 
  accent-color: pink; 
Declare CSS accent-color in :root to control theme color for forms control in the whole document

Browser compatibility

Chrome 93
Edge 93
Safari 15.4
Firefox 92
Opera 79
Internet Explorer
Chrome Android 93
WebView Android 93
iOS Safari 15.4
Firefox Android 92
Opera Android 66
Samsung Internet 17.0

source: https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color#browser_compatibility


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

If you found this article helpful and would like to show your support, you can buy me a coffee using the link below. Thanks a bunch!

Choose an amount


Or enter a custom amount


Thank you for your contribution!



CSS (27) css pseudo (3) debug (2) design (4) fonts (2) html (6) image (8) layout (5) optimization (10) performance (9) responsive (8) Software-development (1)


Recent Post:


Related Posts

%d bloggers like this: