If you often create forms on your site, you've probably encountered the problem that checkboxes and radio buttons are still difficult to change the style of. Unfortunately, TailwindCSS doesn't help with this either. Fortunately, it is possible to create a custom look for checkboxes. See the example below for a basic and a custom checkbox:
First, let's create a generic checkbox. The code looks like this:
<div class="flex items-center"> <input type="checkbox" id="basic" checked class="w-6 h-6 bg-green-200 border-green-800 rounded-lg" /> <label for="basic" class="pl-2 text-slate-400" > Basic HTML checkbox </label> </div>
This results in:
As you can see, the browser took the size into account, but it couldn't handle the colors.
To get a custom checkbox, we need to use some tricks. Since we cannot customize the original checkbox, it is best to remove it. We'll take advantage of the basic HTML functionality that, for checkboxes, clicking on the associated label will also change the status of the input. In addition, we use the
:before pseudo-element to create a custom box before the label. The
:before element will change its appearance depending on the status of your checkbox.
First, we create the basic skeleton. To do this, use a container
div element with the checkbox
input and a
label inside it. It looks like this:
<div class="flex items-center"> <input type="checkbox" /> <label> Custom checkbox </label> </div>
Then hide the box and set the
for attributes accordingly:
<div class="flex items-center"> <input type="checkbox" class="hidden" id="custom" /> <label for="custom"> Basic HTML checkbox </label> </div>
To change the style of the
:before tag's content, we need to know whether the
input is checked in. For this, we use a special Tailwind utility,
We will place three types of classes on the element. The plain utility classes affect the style of the label text. The
before:* classes change the appearance of the "square" of the displayed checkbox when it is unchecked. And
peer-checked:* classes change the style when checked.
It is important to add the
peer utility class to the input element for proper operation.
<input type="checkbox" class="hidden peer" id="custom" />
The final code looks like this:
<div class="flex items-center"> <input type="checkbox" class="hidden peer" id="custom" checked /> <label for="custom" class="relative flex h-6 cursor-pointer pl-8 select-none text-slate-400 before:absolute before:left-0 before:flex before:h-6 before:w-6 before:items-center before:justify-center before:rounded-lg before:rounded-tr-none before:border before:border-green-800 before:bg-white before:transition-[background-color] before:duration-300 before:ease-in before:content-[''] peer-checked:before:bg-green-200 peer-checked:before:text-green-800 peer-checked:before:content-['X'] peer-checked:before:font-bold peer-checked:before:transition-[background-color] peer-checked:before:duration-300 peer-checked:before:ease-in" > Custom checkbox </label> </div>
And the result is: