How to Create Checkbox and Radio Buttons in HTML/CSS

Create Checkbox and Radio Buttons

0

Many beginners ask me what is the way to create checkbox or radio buttons using html/css only. For them, here I am providing step by step guide on how to make radio buttons and checkbox easily.

For simple Checkbox the HTML markup can be as follows:

<div class="your-custom-class">
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div class="your-custom-class">
<input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
<label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>

And the CSS is here:

.checkbox-custom {
display: none;
}
.checkbox-custom-label {
display: inline-block;
position: relative;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
content: '';
background: #fff;
border-radius: 0px;
border: 2px solid #82F60F;
display: inline-block;
vertical-align: middle;
width: 15px; height: 15px;
padding: 2px; margin-right: 10px;
}
.checkbox-custom:checked + .checkbox-custom-label:after {
content: "";
padding: 2px;
position: absolute;
width: 2px;
height: 15px;
border: solid #82F60F;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
top: 2px; left: 5px;
}

Explanation of above codes

You see in the HTML markup I used ‘checkbox-custom‘ class for the input element, and ‘checkbox-custom-lable‘ for the label. In the CSS I used those 2 classes to style the checkbox as my needs.

Why did I use ‘display: none’ for ‘checkbox-custom’ class? This is because, I want to style my checkbox in my way. I do not want the default style by the browser visible there. All browsers have their own styles for ‘input type’ elements. By using ‘display: none’, I have removed that browser style and then I implemented my own styles. To do that, I have used the following css:

.checkbox-custom + .checkbox-custom-label:before

The above line is responsible to implement all the styles for the Box there in my checkbox.

And, to style the Tick Mark of the Checkbox, the following class is used:

.checkbox-custom:checked + .checkbox-custom-label:after

For example, you want the Tick Mark to be red colored. For that, the will be:

.checkbox-custom:checked + .checkbox-custom-label:after {
border: solid red;
}

Now, what if I want to make a choice checked by default. Easy, just use ‘checked’ at the end of the input type. Say, we want the 2nd choice checked by default. Then the above HTML markup would be as follows:

<div> <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox"> <label for="checkbox-1" class="checkbox-custom-label">First Choice</label> </div> <div> <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox" checked> <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label> </div>

Now, the Second Choice will be checked by default automatically.

For Radio buttons, the HTML and CSS are similar as above. Here I am giving you the basic codes only, since I think you have already understood the explanation of the codes.

For simple Radio button the HTML markup can be as follows:

<div class="radio-item">
<input type="radio" id="ritema" name="ritem" value="ropt1">
<label for="ritema">Option 1</label>
</div>
<div class="radio-item">
<input type="radio" id="ritemb" name="ritem" value="ropt2">
<label for="ritemb">Option 2</label>
</div>

And the CSS is here:

.radio-item {
display: inline-block;
position: relative;
padding: 0 6px;
margin: 10px 0 0;
}
.radio-item input[type='radio'] {
display: none;
}
.radio-item label {
color: #666;
font-weight: normal;
}
.radio-item label:before {
content: " ";
display: inline-block;
position: relative;
top: 5px;
margin: 0 5px 0 0;
width: 20px;
height: 20px;
border-radius: 11px;
border: 2px solid #82F60F;
background-color: transparent;
}
.radio-item input[type=radio]:checked + label:after {
border-radius: 11px;
width: 12px;
height: 12px;
position: absolute;
top: 9px;
left: 10px;
content: " ";
display: block;
background: #82F60F;
}

We hope this article helped you learn how to create custom styled checkbox and radio buttons. You may also want to check out our guide on How To Format Your Website Background To Make It Way Cooler.

If you liked this article, then please subscribe to our YouTube Channel for video tutorials. You can also find us on Facebook.

Leave A Reply

Your email address will not be published.