Customize Checkbox and Radio Inputs with CSS

Checkboxes and radio buttons are the common elements to use in any web form. Generally, browser’s default style is used for checkbox and radio button. But if you want to make a nice UI web form and match with the web page layout, form element customization is required.

Customize checkbox and radio button overrides browser’s default style and changes the look of checkbox and radio fields. You can easily customize checkbox and radio inputs with CSS without using JavaScript code. In this tutorial, we will show you how to customize checkbox and radio inputs with CSS.

Customize Checkbox with CSS

The following example code creates custom checkboxes using CSS.

HTML Code:
The following HTML defines checkbox form inputs.

<label class="checkbox">One
    <input type="checkbox" checked="checked">
    <span class="check"></span>
</label>
<label class="checkbox">Two
    <input type="checkbox">
    <span class="check"></span>
</label>
<label class="checkbox">Three
    <input type="checkbox">
    <span class="check"></span>
</label>
<label class="checkbox">Four
    <input type="checkbox">
    <span class="check"></span>
</label>

CSS Code:
Use the following CSS to override browser’s default style with the custom checkbox.

/* custom checkbox */
.checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* hide the browser's default checkbox */
.checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* create custom checkbox */
.check {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border: 1px solid #ccc;
}

/* on mouse-over, add border color */
.checkbox:hover input ~ .check {
    border: 2px solid #2489C5;
}

/* add background color when the checkbox is checked */
.checkbox input:checked ~ .check {
    background-color: #2489C5;
    border:none;
}

/* create the checkmark and hide when not checked */
.check:after {
    content: "";
    position: absolute;
    display: none;
}

/* show the checkmark when checked */
.checkbox input:checked ~ .check:after {
    display: block;
}

/* checkmark style */
.checkbox .check:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

Customize Radio Button with CSS

The following example code creates custom radio buttons using CSS.

HTML Code:
The following HTML defines radio form inputs.

<label class="radio">One
    <input type="radio" checked="checked" name="radio">
    <span class="check"></span>
</label>
<label class="radio">Two
    <input type="radio" name="radio">
    <span class="check"></span>
</label>
<label class="radio">Three
    <input type="radio" name="radio">
    <span class="check"></span>
</label>
<label class="radio">Four
    <input type="radio" name="radio">
    <span class="check"></span>
</label>

CSS Code:
Use the following CSS to override browser’s default style with custom radio button.

/* custom radio */
.radio {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* hide the browser's default radio button */
.radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* create custom radio */
.radio .check {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 50%;
}

/* on mouse-over, add border color */
.radio:hover input ~ .check {
    border: 2px solid #2489C5;
}

/* add background color when the radio is checked */
.radio input:checked ~ .check {
    background-color: #2489C5;
    border:none;
}

/* create the radio and hide when not checked */
.radio .check:after {
    content: "";
    position: absolute;
    display: none;
}

/* show the radio when checked */
.radio input:checked ~ .check:after {
    display: block;
}

/* radio style */
.radio .check:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

Conclusion

There are many jQuery plugins are available to customize checkboxes and radio buttons. But it’s always a smart decision to use CSS to customize from input elements. Our example code provides the easiest way to change default style of checkbox and radio inputs. Also, you can easily change the color of custom checkbox and radio button as per your website layout.