Skip to content

Instantly share code, notes, and snippets.

@nitinja
Created May 25, 2017 03:01
Show Gist options
  • Save nitinja/a6493eefad878870cbef50938fbc7e75 to your computer and use it in GitHub Desktop.
Save nitinja/a6493eefad878870cbef50938fbc7e75 to your computer and use it in GitHub Desktop.
CSS only styles for checkboxes and radios
<!DOCTYPE html>
<html lang="en" >
<head >
<meta charset="UTF-8" >
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" >
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" >
<style >
body {
font-family: 'Lato', sans-serif;
}
/* Hide the checkbox/radio. We will simulate it later using label. */
input[type=checkbox], input[type=radio] {
opacity: 0;
position: absolute;
}
/* Some basic styling for alignment and more */
input[type=checkbox], input[type=checkbox] + label, input[type=radio], input[type=radio] + label {
display: inline-block;
vertical-align: middle;
cursor: pointer;
user-select: none;
}
/* CSS Pseudo class "before" to show checkbox/radio box. Will be attached to every label adjacent to input checkbox.*/
input[type=checkbox] + label:before, input[type=radio] + label:before {
font-family: 'FontAwesome';
background: #f1fff6;
display: inline-block;
vertical-align: middle;
width: 20px;
margin-right: 10px;
text-align: center;
font-size: 12px;
padding: 4px 0;
color: #e4efe5;
transition: color .4s;
border: 1px solid #3faf2d;
}
/* Tick inside checkbox. I am using Font-awesome's tick, but you can use plain unicode tick */
/* or any other symbol you want. */
input[type=checkbox] + label:before {
content: '\f00c';
border-radius: 2px;
}
/* Circle inside radio circle. Border-radius to make it a circle. */
input[type=radio] + label:before {
content: '\f111';
border-radius: 50%;
}
/* Styles when checkbox/radio is checked */
input:checked + label:before {
background: #288619;
color: #FFF;
}
/* Styles when checkbox/radio is disabled */
input[type=checkbox][disabled] + label:before, input[type=radio][disabled] + label:before {
color: #d0d0d0;
background: #bfbfbf;
border: 1px solid #656b64;
}
/* Alternative styles for checkbox/radio with background */
/* Apply class "checkbox-selected-backbground" to your checkbox/radio input elements.*/
input.checkbox-selected-backbground:checked + label {
background-color: #c7e0c1;
font-weight: bold;
padding-right: 6px;
color: #14540a;
}
input[type=checkbox].checkbox-selected-backbground:checked + label {
border-radius: 2px;
}
input[type=radio].checkbox-selected-backbground:checked + label {
border-radius: 10px;
}
/* styles for the demo */
.example {
margin: 40px 20px;
}
.example label {
margin: 0 10px;
}
</style >
</head >
<body >
<strong >Regular</strong >
<div class='example' >
<input type='checkbox' id='my-checkbox' >
<label for='my-checkbox' >My Checkbox</label >
</div >
<div class='example' >
<input type='radio' name='radio-group-1' id='my-radio1' >
<label for='my-radio1' >My Radio 1</label >
<input type='radio' name='radio-group-1' id='my-radio2' >
<label for='my-radio2' >My Radio 1</label >
</div >
<strong >With Background Style</strong >
<div class='example' >
<input type='checkbox' id='my-checkbox-bg' class='checkbox-selected-backbground' >
<label for='my-checkbox-bg' >My Checkbox</label >
</div >
<div class='example' >
<input type='radio' name='radio-group-1-bg' id='my-radio1-bg' class='checkbox-selected-backbground' >
<label for='my-radio1-bg' >My Radio 1</label >
<input type='radio' name='radio-group-1-bg' id='my-radio2-bg' class='checkbox-selected-backbground' >
<label for='my-radio2-bg' >My Radio 1</label >
</div >
</body >
</html >
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment