koTristateCheckboxes.css

.tristate-checkbox {
	position: relative;
	display: inline-block;
    zoom: 1;
}

.tristate-checkbox > .tristateBox {
	position: relative;
	display: block;
	width: 0.875em;
	height: 0.875em;
	border: 0.125em solid #ccc;
	background-color: #eee;
	-webkit-border-radius: 0.25em;
	-moz-border-radius: 0.25em;
	border-radius: 0.25em;
}

.tristate-checkbox > .tristateBox > .tristateOverlay {
	position: absolute;
	display: none;
}

.tristate-checkbox > input[checked="checked"] + .tristateBox > .tristateOverlay {
	left: 0.125em;
	top: 0em;
	width: 0.875em;
	height: 0.375em;
	border-bottom: 0.125em solid #333;
	border-left: 0.125em solid #333;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	zoom: 1;
	display: block;
}

.tristate-checkbox > input[tristate="tristate"] + .tristateBox > .tristateOverlay {
	left: 0.125em;
	top: 0.125em;
	width: 0.625em;
	height: 0.625em;
	background-color: black;
	-webkit-border-radius: 0.125em;
	-moz-border-radius: 0.125em;
	border-radius: 0.125em;
	display: block;
}

.tristate-checkbox > input {
	position: absolute;
	outline: none;
	left: 0;
	top: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	border: none;
	margin: 0;
	z-index: 1;
	opacity: 0;
}

.tristate-checkbox > input:active + .tristateBox, .tristate-checkbox > input:focus + .tristateBox {
	border-color: #aaa;
	background-color: #ddd;
}