Accent Colors for Checkboxes and Radios

Priyanka-Chettri - Jun 5 - - Dev Community

Utilize accent-* utilities to modify the accent color of elements, ideal for customizing the appearance of checkboxes and radio buttons by replacing the browser's default color.

Cover

Here, I have given accent color accent-pink-500, you can customize the color according to your need.This comes handy if you want to customize the look of your check boxes and radio buttons according to your theme.

The code for it is given below:



<div class="mx-auto my-auto border h-[100px] w-[300px] rounded-md flex justify-center items-center gap-4 shadow-lg">
<label class="font-semibold font-serif">Accent Color</label>
<input type="checkbox" class="accent-pink-500 " id="checkbox" >
</div>


Enter fullscreen mode Exit fullscreen mode

Thanks for reading!

. . . .