rodenacker/material-design-checkboxes-radiobuttons.html

## material-design-checkboxes-radiobuttons.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
<style>
input[type="radio"]:focus,
input[type="checkbox"]:focus {
	outline:0;
}
input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	transition: all .1s ease-in-out;
	width: 20px;
	height: 20px;
	border: 2px solid #cccccc;
	margin-bottom:0;
}
input[type="checkbox"]:checked {
	transform: rotate(-45deg) translate(4px, 1px) scale(1.1);
	height:10px;
	margin-bottom:10px;
	border-color: #3399ff;
	border-top-style: none;
	border-right-style: none;
}
input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
    background-color: #FFF;
	background-clip: content-box;
    border: 1px solid #3399ff;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    padding: 3px;
}
input[type="radio"]:checked {
    background-color: #3399ff;
}
</style>
</head>
<body>
<h2>Checkbox</h2>
<div>
	<input type="checkbox">
</div>
<h2>Radio</h2>
<div>
	<input name="radio" type="radio">
</div>
<div>
	<input name="radio" type="radio">
</div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style>
	input[type="radio"]:focus,
	input[type="checkbox"]:focus {
	outline:0;
	}
	input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	transition: all .1s ease-in-out;
	width: 20px;
	height: 20px;
	border: 2px solid #cccccc;
	margin-bottom:0;
	}
	input[type="checkbox"]:checked {
	transform: rotate(-45deg) translate(4px, 1px) scale(1.1);
	height:10px;
	margin-bottom:10px;
	border-color: #3399ff;
	border-top-style: none;
	border-right-style: none;
	}
	input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	background-color: #FFF;
	background-clip: content-box;
	border: 1px solid #3399ff;
	border-radius: 50%;
	height: 20px;
	width: 20px;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	padding: 3px;
	}
	input[type="radio"]:checked {
	background-color: #3399ff;
	}
	</style>
	</head>
	<body>
	<h2>Checkbox</h2>
	<div>
	<input type="checkbox">
	</div>
	<h2>Radio</h2>
	<div>
	<input name="radio" type="radio">
	</div>
	<div>
	<input name="radio" type="radio">
	</div>
	</body>
	</html>