DEV Community

Cover image for How to change the color or the accent color of the checkbox input HTML element on a webpage using CSS?
MELVIN GEORGE
MELVIN GEORGE

Posted on • Originally published at melvingeorge.me

How to change the color or the accent color of the checkbox input HTML element on a webpage using CSS?

Originally posted here!
To change the color or the accent color of the input checkbox HTML element on a webpage using CSS, you can use the accent-color CSS property on the checkbox input selector in the CSS styles and set its value to the color of your choice.

TL;DR

<!-- A simple webpage with a checkbox `input` HTML element -->
<html>
  <style>
    #myCheckbox {
      /* setting the checkbox input HTML element accent color to `green` */
      accent-color: green;
    }
  </style>
  <body>
    <label for="myCheckbox">Enable me</label>
    <input type="checkbox" id="myCheckbox" />
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

For example, let's say we have an input checkbox HTML element on the webpage like this,

<!-- A simple webpage with a checkbox `input` HTML element -->
<html>
  <body>
    <label for="myCheckbox">Enable me</label>
    <input type="checkbox" id="myCheckbox" />
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

The webpage now looks like this,

webpage with a checkbox input HTML element

If you see the above screenshot, the checkbox HTML element has the default color or the accent color (blue color in the case of Safari browser) applied to it.

We aim to change the color or the accent color of the checkbox input HTML element to a green color.

To do that first, let's select the checkbox input using the myCheckbox id selector in the CSS styles like this,

<!-- A simple webpage with a checkbox `input` HTML element -->
<html>
  <style>
    #myCheckbox {
      /* CSS style here */
    }
  </style>
  <body>
    <label for="myCheckbox">Enable me</label>
    <input type="checkbox" id="myCheckbox" />
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Now let's apply the accent color of green to the checkbox input HTML elements by using the accent-color CSS property inside the #myCheckbox id selector and setting the value as green.

It can be done like this,

<!-- A simple webpage with a checkbox `input` HTML element -->
<html>
  <style>
    #myCheckbox {
      /* setting the checkbox input HTML element accent color to `green` */
      accent-color: green;
    }
  </style>
  <body>
    <label for="myCheckbox">Enable me</label>
    <input type="checkbox" id="myCheckbox" />
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Now the checkbox input HTML element's accent color is changed to green color.

A visual representation of the checkbox input HTML element is shown below,

webpage with a checkbox input HTML element having accent color set to green

We have successfully changed the accent color of the checkbox input HTML element using CSS. Yay 🥳!

See the above code live in codesandbox.

That's all 😃.

Top comments (0)