tailwindcss Forms PlugIn: Styling Checkboxes

Question

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

Answer 1

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