Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

tailwindcss Forms PlugIn: Styling Checkboxes

Like the title says, I am using tailwind and the forms plugin. I have styled the color (green), border color (grey) and tab outline (green as well) by changing the text, border and ring color. (I have attached an image so that you know what I'm talking about.) However, I haven't yet found out how to change the (white by default) color when the checkbox is not selected, the checkmark color, and the color of the (white) border between the checkbox and the outer border for the tab key highlighting. Can somebody help?

Checkboxes

like image 405
Ralph Bear Avatar asked Aug 31 '25 11:08

Ralph Bear


1 Answers

change the (white by default) color when the checkbox is not selected

I was able to change this with background color, unless something else in your css is effecting that.

the checkmark color

The checkmark is an svg and I was able to override the color by adding it in the main css sheet.

[type='checkbox']:checked {
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="black" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
}

Here I changed it by setting fill to black. You can't use tailwind colors or hex colors for the fill. You need to convert to RGB, e.g. fill="(255,0,0)" for red. You can use this converter if needed: https://www.rapidtables.com/convert/color/hex-to-rgb.html

the color of the (white) border between the checkbox and the outer border for the tab key highlighting

I was able to change that color with the ring-offset setting. e.g. focus:ring-offset-purple-500

Working example of everything here: https://play.tailwindcss.com/W00ktLdUFw

like image 92
stickyuser Avatar answered Sep 03 '25 00:09

stickyuser