nitinja/stylish-checkboxes-radios.html

## stylish-checkboxes-radios.html
<!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 >
	<!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 >