fredyounan
1/5/2014 - 4:29 AM

flatCheckbox css

flatCheckbox css

gistfile1.html
content_copyfile_download
<!doctyle html>
<html>
  <head>
    <title>Checkboxes</title>
  	<style type="text/css">

	.flatCheckbox {
		width: 25px;
		position: relative;
	}

	.flatCheckbox label {
		cursor: pointer;
		position: absolute;
		width: 25px;
		height: 20px;
		top: 0;
	  	left: 0;
		background: #eee;
	}

	.flatCheckbox label:after {
		opacity: 0.2;
		content: '';
		position: absolute;
		width: 6px;
		height: 3px;
		top: 6px;
		left: 8px;
		border: 3px solid #fff;
		border-top: none;
		border-right: none;

		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	.flatCheckbox label:hover {
		background:#c6c6c6;
	}

	.flatCheckbox label:hover::after {
		opacity: 0.5;
	}

	.flatCheckbox input[type=checkbox]:checked + label:after {
		opacity: 1;

	}

	.flatCheckbox input[type=checkbox]:checked + label {
		background: #2fca6c;
	}

  	</style>
  </head>
  <body>
	
	<div class="flatCheckbox">
		<input type="checkbox" value="1" id="checkbox1" name="" checked>
	  	<label for="checkbox1"></label>
	</div>

  </body>
</html>