Radio Button And Checkbox Designs CSS

 Techmates   18 Apr, 2018  5 mins read   573


In this post, we're creating a radio button and checkbox elements designs using CSS.


The web browsers are not support all the properties/designs for this kind elements. So, in this demo we manipulating the elements(radio-button, checkbox) and replace the core elements with HTML tag(label) and CSS design.

The demo has 2 types of color themes. You can change the theme by replacing the variable file in index.html

The code snippets:


- HTML Structure

 <div class="box-group basic zoomOut">
    <input type="radio" name="radio_border_zoomOut" id="radio_border_zoomOut_1" />
    <label for="radio_border_zoomOut_1">Radio button</label>
</div>
<div class="box-group basic zoomOut">
    <input type="radio" name="radio_border_zoomOut" id="radio_border_zoomOut_2" />
    <label for="radio_border_zoomOut_2">Radio button</label>
</div>	
<div class="box-group basic zoomOut">
    <input type="radio" name="radio_border_zoomOut" id="radio_border_zoomOut_3" />
    <label for="radio_border_zoomOut_3">Radio button</label>
</div>
<div class="box-group basic zoomOut">
    <input type="checkbox" name="checkbox_border_zoomOut" id="checkbox_border_zoomOut_1" />
    <label for="checkbox_border_zoomOut_1">checkbox</label>
</div>
<div class="box-group basic zoomOut">
    <input type="checkbox" name="checkbox_border_zoomOut" id="checkbox_border_zoomOut_2" />
    <label for="checkbox_border_zoomOut_2">checkbox</label>
</div>
<div class="box-group basic zoomOut">
    <input type="checkbox" name="checkbox_border_zoomOut" id="checkbox_border_zoomOut_3" />
    <label for="checkbox_border_zoomOut_3">checkbox</label>
</div>

<div class="box-group basic zoomIn">
    <input type="radio" name="radio_border_zoomIn" id="radio_border_zoomIn_1" />
    <label for="radio_border_zoomIn_1">Radio button</label>
</div>
<div class="box-group basic zoomIn">
    <input type="radio" name="radio_border_zoomIn" id="radio_border_zoomIn_2" />
    <label for="radio_border_zoomIn_2">Radio button</label>
</div>
<div class="box-group basic zoomIn">
    <input type="radio" name="radio_border_zoomIn" id="radio_border_zoomIn_3" />
    <label for="radio_border_zoomIn_3">Radio button</label>
</div>
<div class="box-group basic zoomIn">
    <input type="checkbox" name="checkbox_zoomIn_border" id="checkbox_border_zoomIn_1" />
    <label for="checkbox_border_zoomIn_1">checkbox</label>
</div>
<div class="box-group basic zoomIn">
    <input type="checkbox" name="checkbox_zoomIn_border" id="checkbox_border_zoomIn_2" />
    <label for="checkbox_border_zoomIn_2">checkbox</label>
</div>
<div class="box-group basic zoomIn">
    <input type="checkbox" name="checkbox_zoomIn_border" id="checkbox_border_zoomIn_3" />
    <label for="checkbox_border_zoomIn_3">checkbox</label>
</div>

<div class="box-group solid">
    <input type="radio" name="radio_solid" id="radio_solid_1" />
    <label for="radio_solid_1">Radio button</label>
</div>
<div class="box-group solid">
    <input type="radio" name="radio_solid" id="radio_solid_2" />
    <label for="radio_solid_2">Radio button</label>
</div>
<div class="box-group solid">
    <input type="radio" name="radio_solid" id="radio_solid_3" />
    <label for="radio_solid_3">Radio button</label>
</div>
<div class="box-group solid">
    <input type="checkbox" name="checkbox_solid" id="checkbox_solid_1" />
    <label for="checkbox_solid_1">Checkbox</label>
</div>
<div class="box-group solid">
    <input type="checkbox" name="checkbox_solid" id="checkbox_solid_2" />
    <label for="checkbox_solid_2">Checkbox</label>
</div>
<div class="box-group solid">
    <input type="checkbox" name="checkbox_solid" id="checkbox_solid_3" />
    <label for="checkbox_solid_3">Checkbox</label>
</div>

<div class="box-group solid border">
    <input type="radio" name="radio_solid_border_" id="radio_solid_border__1" />
    <label for="radio_solid_border__1">Radio button</label>
</div>
<div class="box-group solid border">
    <input type="radio" name="radio_solid_border_" id="radio_solid_border__2" />
    <label for="radio_solid_border__2">Radio button</label>
</div>
<div class="box-group solid border">
    <input type="radio" name="radio_solid_border_" id="radio_solid_border__3" />
    <label for="radio_solid_border__3">Radio button</label>
</div>

<div class="box-group solid border">
    <input type="checkbox" name="checkbox_solid_border" id="checkbox_solid_border_1" />
    <label for="checkbox_solid_border_1">Checkbox</label>
</div>
<div class="box-group solid border">
    <input type="checkbox" name="checkbox_solid_border" id="checkbox_solid_border_2" />
    <label for="checkbox_solid_border_2">Checkbox</label>
</div>
<div class="box-group solid border">
    <input type="checkbox" name="checkbox_solid_border" id="checkbox_solid_border_3" />
    <label for="checkbox_solid_border_3">Checkbox</label>
</div>

<div class="box-group solid border-bg">
    <input type="radio" name="radio_solid_border_bg_" id="radio_solid_border_bg__1" />
    <label for="radio_solid_border_bg__1">Radio button</label>
</div>
<div class="box-group solid border-bg">
    <input type="radio" name="radio_solid_border_bg_" id="radio_solid_border_bg__2" />
    <label for="radio_solid_border_bg__2">Radio button</label>
</div>
<div class="box-group solid border-bg">
    <input type="radio" name="radio_solid_border_bg_" id="radio_solid_border_bg__3" />
    <label for="radio_solid_border_bg__3">Radio button</label>
</div>

<div class="box-group solid border-bg">
    <input type="checkbox" name="checkbox_solid_border_bg" id="checkbox_solid_border_bg_1" />
    <label for="checkbox_solid_border_bg_1">Checkbox</label>
</div>
<div class="box-group solid border-bg">
    <input type="checkbox" name="checkbox_solid_border_bg" id="checkbox_solid_border_bg_2" />
    <label for="checkbox_solid_border_bg_2">Checkbox</label>
</div>
<div class="box-group solid border-bg">
    <input type="checkbox" name="checkbox_solid_border_bg" id="checkbox_solid_border_bg_3" />
    <label for="checkbox_solid_border_bg_3">Checkbox</label>
</div>

<div class="box-group card radio" data-check-element="radio">
    <i class="mdi mdi-linux"></i>
    <div class="cf"></div>
    <input type="radio" name="radio_card" id="radio_card_1" />
    <label for="radio_card_1">Option 1</label>
</div>
<div class="box-group card radio" data-check-element="radio">
    <i class="mdi mdi-apple"></i>
    <div class="cf"></div>
    <input type="radio" name="radio_card" id="radio_card_2" />
    <label for="radio_card_2">Option 2</label>
</div>
<div class="box-group card radio" data-check-element="radio">
    <i class="mdi mdi-windows"></i>
    <div class="cf"></div>
    <input type="radio" name="radio_card" id="radio_card_3" />
    <label for="radio_card_3">Option 3</label>
</div>
<div class="box-group card checkbox" data-check-element>
    <i class="mdi mdi-bike"></i>
    <div class="cf"></div>
    <input type="checkbox" name="checkbox_card" id="checkbox_card_1" />
    <label for="checkbox_card_1">Checkbox 1</label>
</div>
<div class="box-group card checkbox" data-check-element>
    <i class="mdi mdi-motorbike"></i>
    <div class="cf"></div>
    <input type="checkbox" name="checkbox_card" id="checkbox_card_2" />
    <label for="checkbox_card_2">Checkbox 2</label>
</div>
<div class="box-group card checkbox" data-check-element>
    <i class="mdi mdi-car"></i>
    <div class="cf"></div>
    <input type="checkbox" name="checkbox_card" id="checkbox_card_3" />
    <label for="checkbox_card_3">Checkbox 3</label>
</div>

- CSS Styles


- style.css

 .grid {
    border-top: 1px solid var(--grid-border-clr);
    border-bottom: 1px solid var(--grid-border-clr);
    margin-bottom: -1px;
}
.col-2 {
    width: 50%;
    float: left;
    padding: 25px 0;
}
.box-group {
    position: relative;
    display: inline-block;
    margin: 0 10px;
}
.box-group input[type="radio"], .box-group input[type="checkbox"] {
    display: none;
}
.box-group label {
    position: relative;
    cursor: pointer;
    font-weight: 700;
    color: var(--clr-gray);
}
.box-group.basic label {
    font-size: 16px;
    padding-left: 25px;
    transform: var(--transition);
}
.box-group.basic label::before, .box-group.basic label::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 20px;
    border-radius: 3px;
    transition: var(--transition);
}
.box-group.basic label::after {
    border: 1px solid var(--clr-gray);
}
.box-group.basic label::before {
    left: 1px;
    font-family: "Material Design Icons";
    opacity: 0;
}
.box-group.basic input[type="checkbox"] + label::before {
    content: "\F12C";
}
.box-group.basic input[type="radio"] + label::before {
    content: "\F0DA";
}
.box-group.basic.zoomOut label::before {
    transform: scale(0);
}
.box-group.basic.zoomIn label::before {
    transform: scale(2);
}
.box-group.basic input[type="radio"] + label::after {
    border-radius: 50%;
}
.box-group.basic:hover label {
    color: var(--clr-gray);
}
.box-group.basic:hover label::after {
    box-shadow: 0 0 5px rgba(0, 0, 0, .15) inset;
}
.box-group.basic input[type="radio"]:checked + label, .box-group.basic input[type="checkbox"]:checked + label {
    color: var(--clr-green);
}
.box-group.basic input[type="radio"]:checked + label::after, .box-group.basic input[type="checkbox"]:checked + label::after {
    border-color: var(--clr-green);
}
.box-group.basic input[type="radio"]:checked + label::before, .box-group.basic input[type="checkbox"]:checked + label::before {
    opacity: 1;
    transform: scale(1);
    color: var(--clr-green);
}
.box-group.solid label {
    padding: 10px 25px;
    border-radius: 2px;
    transition: var(--transition);
}
.box-group.solid.border label {
    border: 1px solid rgba(0, 0, 0, .25);
}
.box-group.solid.border-bg label {
    background: rgba(0, 0, 0, .1);
}
.box-group.solid:hover label {
    background: rgba(0, 0, 0, .05);
}
.box-group.solid input[type="checkbox"]:checked + label, .box-group.solid input[type="radio"]:checked + label {
    color: #ffffff;
    background: var(--clr-green);
    border-color: var(--clr-green);
}
.box-group.solid label::before {
    position: absolute;
    content: "";
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    font-family: "Material Design Icons";
    color: #ffffff;
    text-align: center;
    line-height: 20px;
    border-radius: 3px;
    transform: scale(0) translateX(-20px);
    opacity: 0;
    transition: var(--transition);
}
.box-group.solid input[type="checkbox"] + label::before {
    content: "\F12C";
}
.box-group.solid input[type="radio"] + label::before {
    content: "\F0DA";
}
.box-group.solid input[type="checkbox"]:checked + label::before, .box-group.solid input[type="radio"]:checked + label::before {
    opacity: 1;
    transform: scale(1) translateX(0);
}
.box-group.card {
    position: relative;
    padding: 15px 25px;
    min-width: 120px;
    border-radius: 3px;
    cursor: pointer;
    transition: all .5s;
    z-index: 9;
}
.box-group.card.checked {
    background: rgba(0, 0, 0, .15);
}
.box-group.card::after {
    position: absolute;
    font-family: "Material Design Icons";
    top: 5px;
    left: 5px;
    font-size: 24px;
    color: var(--clr-green);
    transform: scale(0);
    opacity: 0;
    transition: all .5s;
}
.box-group.card.radio::after {
    content: "\F01A";
}
.box-group.card.checkbox::after {
    content: "\F790";
}
.box-group.card.checked::after {
    transform: scale(1);
    opacity: 1;
}
.box-group.card label {
    font-weight: 700;
    font-size: 16px;
    z-index: -1;
}
.box-group.card i {
    font-size: 55px;
    color: var(--clr-gray);
    display: inline-block;
    margin-bottom: 10px;
    transition: all .5s;
}
.box-group.card:hover {
    background: rgba(0, 0, 0, .1);
}
.box-group.card:hover i {
    color: var(--clr-black);
    transform: translateY(5px);
}
.box-group.card.checked i {
    color: var(--clr-black);
    transform: translateY(5px);
}

- black-theme.css

 :root {
    --transition: .25s;
    --clr-blue: #4285F4;
    --clr-gray: #ccc;
    --clr-black: #fff;
    --clr-green: #4baf4b;
    --grid-border-clr: rgba(255, 255, 255, .1);
}
.dd-center-p-content {
    background: #1C1C1C;
}
.dd-title {
    color: #fff;
}

- white-theme.css

 :root {
    --clr-blue: #4285F4;
    --clr-gray: #6c6c6c;
    --clr-black: #3c3c3c;
    --clr-green: #4baf4b;
    --grid-border-clr: #cccccc;
    --transition: .25s;
}

- Javascripts


 $('[data-check-element]').on('click', function() {
	if( $(this).attr('data-check-element') == 'radio' ) {
		$('.box-group.card.radio').removeClass('checked');
		$(this).addClass('checked');
	} else {
		$(this).toggleClass('checked');
	}
});

Hope you guys liked the demo!



Other Resources/3rd Party Libraries

  • jQuery
  • Google Fonts
  • Material Design Icons