Radio Button And Checkbox Designs CSS

Collection of Radio Buttons and Checkbox Designs using CSS

Techmates 18 Apr, 2018 4311

In this post, we will create a radio button and checkbox element designs using CSS.

We cannot apply the CSS for the native browser's radio button or checkbox. That's why we will manipulate the Radio & Checkbox elements.

The demo has 2 color themes(light & dark). You can change the theme by replacing the variable value in the file.

First, we'll group the radio/checkbox input and label
Then we'll hide the input[type="radio/checkbox"] & apply specific CSS to psuedo element ::after, ::before.

HTML

<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

.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);
}

Variables for themes

-Dark theme

: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;
}

-Light theme

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

And we will add some basic javascript to trigger click and toggle active class.

Javascript

$('[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');
	}
});

You can use Image, SVG pattern, or other CSS code to achieve your required effect.

Credits / Resources

jQuery

Google Fonts

Material Design Icons

Related Snippets

Card Design and Transformation using Perspective css

Techmates 27 Jan, 2020 3840

html, css, creative ...

Card hover effects - reveal details on card hover

Techmates 24 Mar, 2020 4701

html, css, creative ...

Creative Link Effects CSS

Techmates 04 Mar, 2020 4556

css, creative, animation ...

Input Text Box Effects in CSS

Techmates 16 Feb, 2018 12710

html, css, creative ...

Dd

Radio Button And Checkbox Designs CSS

Collection of Radio Buttons and Checkbox Designs using CSS

HTML

CSS

-Dark theme

-Light theme

Javascript

Credits / Resources

Related Snippets

Card Design and Transformation using Perspective css

Card hover effects - reveal details on card hover

Creative Link Effects CSS

Input Text Box Effects in CSS

Themes

Mockups

Dd

Radio Button And Checkbox Designs CSS

Collection of Radio Buttons and Checkbox Designs using CSS

HTML

CSS

-Dark theme

-Light theme

Javascript

Credits / Resources

Related Snippets

Card Design and Transformation using Perspective css

Card hover effects - reveal details on card hover

Creative Link Effects CSS

Input Text Box Effects in CSS

Themes

Mockups

Newsletter