Add coloured check marks

[MarcelloTheArcane]

I'm using a checkbox on a coloured background, and so I want the checkbox box to be white, and the tick inside to be the same colour as the background. Here's one made from an SVG I stole from here before Tailwind 2:

I'm trying to replicate this using just classes with Tailwind 2, but have been unable to so far:

<input type="checkbox" class="ml-1 h-4 w-4 rounded border-gray-400 focus:border-raisin focus:ring-2 focus:ring-black text-white">

(I have a custom colour called 'raisin' which is #27262c)

[agusterodin]

Did you ever find an elegant solution?

[patrickgaskill]

Just ran into this one. I expected bg-white text-purple to work like your first example.

[agusterodin]

The best quick solution I came up with was adding this to my base styles (the only thing being changed is the fill value):

[type='checkbox'].checkmark-gray:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='111827' xmlns='http://www.w3.org/2000/svg'%3e%3cpath 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'/%3e%3c/svg%3e");
  @apply text-white;
}

So all I have to do is add a checkmark-gray class to the checkbox and it looks the way I want. Ideally there would be a way to generate checkmark-[color]-[color number] classes using the design system as the source of truth for colors in PostCSS. I didn't have time to look into it further since our sprints at work have been super tight.

Let me know if you find anything even more elegant.

[jenstornell]

Now we can control the background with the text color like text-blue-500. It means we have no color left to control the text color.

To me the ideal solution would be:

• bg- - Controls the checkbox background color.
• text- - Controls the checkbox text color.

Else we are stuck with just the text color.

[jenstornell]

I just made a heck of a hack. It's similar to agusterodin solution. It includes both checkboxes and radio buttons.

@layer components {
  [type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23262626' xmlns='http://www.w3.org/2000/svg'%3e%3cpath 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'/%3e%3c/svg%3e");
  }

  [type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23262626' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
  }

  [type="checkbox"],
  [type="radio"] {
    @apply focus:ring-0 focus:ring-offset-0;
  }

  [type="checkbox"],
  [type="checkbox"]:checked,
  [type="checkbox"]:checked:hover,
  [type="checkbox"]:checked:focus,
  [type="checkbox"]:indeterminate:hover,
  [type="radio"],
  [type="radio"]:checked,
  [type="radio"]:checked:hover,
  [type="radio"]:checked:focus {
    @apply border-gray-300;
  }
}

As you may notice I also removed the focus styles because I found it distracting and it's not default on checkboxes anyway.

The input without the label looks like this:

<input type="checkbox" class="w-5 h-5 text-white rounded-sm" />

<input type="radio" class="w-5 h-5 text-white" />

The result of the checkboxes in the below image:

See my previous comment for a solid suggestion to a solution.

[syropian]

Now we can control the background with the text color like text-blue-500. It means we have no color left to control the text color.

To me the ideal solution would be:

bg- - Controls the checkbox background color.
text- - Controls the checkbox text color.

This would be my ideal as well. The tricky part is that the checkbox uses a background image for the check/dash, and even though it's an encoded SVG, stuff like currentColor won't work. The only solution I can think of is some type of clever :before / :after thing, but that would stop people from using before/after for their own needs (now that it's a thing in Tailwind 2.2.0)

[majnikov]

are there any plans to add this?

[serhez]

Would love to see this!

[nonameolsson]

I could be mistaken, but is this what you are looking for? https://tailwindcss.com/docs/accent-color

[syropian]

@nonameolsson afaik you still can't style the color of the checkmark itself

[agusterodin]

Since this plugin essentially shows checkmarks as a custom svg (to normalize aesthetic across browsers/platforms), I don't think the SVG image will go off of the accent color property but instead goes off of the inlined background color in that checkmark svg.