JSFiddle - React, Tailwind, and code Playground

by writen

HTML

<div>
            <input type="checkbox" name="custom1" id="custom1" class="cc"> <label for="custom1"> Label</label><br>
            <input type="checkbox" name="custom1-1" id="custom1-1" class="cc" checked> <label for="custom1-1"> checked</label><br>
            <input type="checkbox" name="custom2" id="custom2" class="cc" disabled> <label for="custom2"> Disabled</label><br>
            <input type="checkbox" name="custom3" id="custom3" class="cc" disabled checked> <label for="custom3"> Disabled, Checked</label><br>
        </div>
        
        <div>
            <input type="radio" name="custom4" id="custom4-1" class="cc" checked> <label for="custom4-1"> Checked</label>
            <input type="radio" name="custom4" id="custom4-2" class="cc"> <label for="custom4-2"> Label 3</label>
            <input type="radio" name="custom4" id="custom4-3" class="cc" disabled> <label for="custom4-3"> Disabled</label>
            
        </div>
        
         <div>
           <input type="radio" name="custom5" id="custom5-1" class="cc"> <label for="custom5-1"></label><br>
           <input type="radio" name="custom5" id="custom5-2" class="cc"> <label for="custom5-2"></label>
        </div>
        
        <div>
            <input type="radio" name="custom6" id="custom6-1" class="cc" disabled checked><label for="custom6-1"> Checked, Disabled</label>
        </div>

CSS

input[type=checkbox], input[type=radio] {
	display: none; /* ukrywamy nasz input */
}

input[type=checkbox] + label, input[type=radio] + label {
	position: relative;
	padding-left: 23px; /* margines wewnętrzny - trzeba zrobić trochę miejsca dla naszego pola */
}

input[type=checkbox] + label:before, input[type=radio] + label:before {
	position: absolute;
	content: "";
	display: block; /* koniecznie element blokowy, aby móc nadać odpowiednie wymiary */
	width: 10px;
	height: 10px;
	top: 0; /* ustalamy pozycje */
	left: 0;
	cursor: pointer; /* dodamy jeszcze odpowiedni kursor */
	transition: all .4s ease;
    -webkit-transition: all .4s ease;
    background-color: #cccccc;
	border: 3px solid #cccccc;
}

/* checkbox */
input[type=checkbox] + label:before {
	border-radius: 2px;
}

/* radio */
input[type=radio] + label:before {
	border-radius: 50%; /* aby input radio był okrągły */
}

/* gdy zaznaczony */
input[type=checkbox]:checked + label:before, input[type=radio]:checked + label:before {
	background-color: #ffffff;
}

/* gdy zablokowany */
input[type=checkbox]:disabled + label:before, input[type=radio]:disabled + label:before {
	background-color: #b6b6b6;
	border-color: #b6b6b6;
}

/* gdy zaznaczony i zablokowany */
input[type=checkbox]:checked:disabled + label:before, input[type=radio]:checked:disabled + label:before {
	background-color: #cccccc;
	border-color: #b6b6b6;
}