JSFiddle - React, Tailwind, and code Playground

by koh_edwin

HTML

<h1>CSS3 Checkbox Styles</h1>



<!-- Squared FOUR -->
<div class="squaredFour">
	<input type="checkbox" value="None" id="squaredFour" name="check" />
	<label for="squaredFour"></label>
</div>

CSS

body {
	background: #555;
}

h1 {
	color: #eee;
	font: 30px Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	text-shadow: 0px 1px black;
	text-align: center;
	margin-bottom: 50px;
}


/* SQUARED FOUR */
.squaredFour {
	width: 20px;	
	margin: 20px auto;
	position: relative;
}

.squaredFour label {
	cursor: pointer;
	position: absolute;
	width: 20px;
	height: 20px;
	top: 0;
	border-radius: 4px;

	
	box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
	background: #fcfff4;

	background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}

.squaredFour label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	content: '';
	position: absolute;
	width: 9px;
	height: 5px;
	background: transparent;
	top: 4px;
	left: 4px;
	border: 3px solid #333;
	border-top: none;
	border-right: none;

	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.squaredFour label:hover::after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.5;
}

.squaredFour input[type=checkbox]:checked + label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}