Chekboxes CSS

Chekboxes CSS.markdown

Chekboxes CSS

Chekboxes CSS normal. disable - un and checked. with checkboxes stup*d values.

sorry the messy and repeated code...

A Pen by Pedro Campos on CodePen.

License.

index.html

<div class="container">

<h1>checkboxes <span>normal. disable - un and checked</span>
<br /><span>"with checkboxes stup*d values"</span></h1>

<div class="check-1">
<div class="checkbox-1">
	<input type="checkbox" id="checkbox-1" value="what-you-want">
	<label for="checkbox-1"></label>
</div>
<div class="checkbox-1 disable">
	<input type="checkbox" id="checkbox-1-disable-un" value="what-you-cant" disabled>
	<label for="checkbox-1-disable-un"></label>
</div>
<div class="checkbox-1 disable">
	<input type="checkbox" id="checkbox-1-disable" value="what-you-have-to" checked="checked" disabled>
	<label for="checkbox-1-disable"></label>
</div>
</div>

<div class="check-2">
<div class="checkbox-2">
	<input type="checkbox" id="checkbox-2" value="make-me-full">
	<label for="checkbox-2"></label>
</div>
<div class="checkbox-2 disable">
	<input type="checkbox" id="checkbox-2-disable-un" value="almost-full-but-no-color" disabled>
	<label for="checkbox-2-disable-un"></label>
</div>
<div class="checkbox-2 disable">
	<input type="checkbox" id="checkbox-2-disable" value="im-not-really-full-but-i-have-color-soooo" checked="checked" disabled>
	<label for="checkbox-2-disable"></label>
</div>
</div>

<div class="check-3">
<div class="checkbox-3">
	<input type="checkbox" id="checkbox-3" value="i-need-border">
	<label for="checkbox-3"></label>
</div>
<div class="checkbox-3 disable">
	<input type="checkbox" id="checkbox-3-disable-un" value="this-border-is-for-life" disabled>
	<label for="checkbox-3-disable-un"></label>
</div>
<div class="checkbox-3 disable">
	<input type="checkbox" id="checkbox-3-disable" value="strong-border-foreveeeer" checked="checked" disabled>
	<label for="checkbox-3-disable"></label>
</div>
</div>

<div class="check-4">
<div class="checkbox-4">
	<input type="checkbox" id="checkbox-4" value="give-me-your-vote-common">
	<label for="checkbox-4"></label>
</div>
<div class="checkbox-4 disable">
	<input type="checkbox" id="checkbox-4-disable-un" value="even-if-you-want-it-you-cant-vote" disabled>
	<label for="checkbox-4-disable-un"></label>
</div>
<div class="checkbox-4 disable">
	<input type="checkbox" id="checkbox-4-disable" value="huahahaaaa-you-have-no-power-on-this-vote" checked="checked" disabled>
	<label for="checkbox-4-disable"></label>
</div>
</div>

<div class="check-5">
<div class="checkbox-5">
	<input type="checkbox" id="checkbox-5" value="to-the-right-to-the-left-now-with-me-common-to-the-right-to-the-left-clap-clap">
	<label for="checkbox-5"><span></span></label>
</div>
<div class="checkbox-5 disable">
	<input type="checkbox" id="checkbox-5-disable-un" value="oh-im-stucked-on-this-side-the-left-side-noooo" disabled>
	<label for="checkbox-5-disable-un"><span></span></label>
</div>
<div class="checkbox-5 disable">
	<input type="checkbox" id="checkbox-5-disable" value="the-correct-side-is-the-right-side-if-you-know-what-i-mean" checked="checked" disabled>
	<label for="checkbox-5-disable"><span></span></label>
</div>
</div>

<div class="check-6">
<div class="checkbox-6">
	<input type="checkbox" id="checkbox-6" value="Give-me-a-smile-pleeeeeease">
	<label for="checkbox-6"><span></span></label>
</div>
<div class="checkbox-6 disable">
	<input type="checkbox" id="checkbox-6-disable-un" value="Oh-nooooo" disabled>
	<label for="checkbox-6-disable-un"><span></span></label>
</div>
<div class="checkbox-6 disable">
	<input type="checkbox" id="checkbox-6-disable" value="Oh-yeeeee-you-cant-make-me-sad" checked="checked" disabled>
	<label for="checkbox-6-disable"><span></span></label>
</div>
</div>

<h1><span>sorry the messy and repeated code...</span></h1>

</div>

script.js

/* updated with ".checkbox-6 label span" absolute position to work in Firefox. */

style.css

@import "http://fonts.googleapis.com/css?family=Titillium+Web:200";

body { background-color: #35383C; font-family: 'Titillium Web', Arial, sans-serif; }
h1 { text-align: center; color: #EB5767; font-weight: 200; font-size: 24px; font-smooth: always; -webkit-font-smoothing: antialiased; }
h1 span { font-size: 16px; }
/* checkbox */
input[type="checkbox"] { display: none; }

.container {
	width: 468px;
	margin: 20px auto;
}
/* check-1 */
.check-1 {
	background-color: #35383C;
	padding: 24px;
	float: left;
}
.check-2 {
	background-color: #3C3F43;
	padding: 24px;
	float: left;
}
.check-3 {
	width: 372px;
	background-color: #FA6F57;
	padding: 24px 48px;
	float: left;
	clear: both;
}
.check-4 {
	width: 372px;
	background-color: #F5BA4E;
	padding: 24px 48px;
	float: left;
	clear: both;
}
.check-5 {
	width: 372px;
	background-color: #3C3F43;
	padding: 24px 48px;
	float: left;
	clear: both;
}
.check-6 {
	width: 372px;
	background-color: #EB5767;
	padding: 24px 48px;
	float: left;
	clear: both;
}

/* checkbox 1 */
.checkbox-1 { margin: 24px; float:left; }
.checkbox-1 label { display: block; cursor: pointer; }
.checkbox-1 label {
	width: 12px; height: 12px;
	border: 1px solid #23E2AB;
	-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
}
.checkbox-1 label:after {
	display: block;
	content: '';
	width: 8px;
	height: 8px;
	margin: 2px;
	background-color: #45484C;
	-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
	-webkit-transition: 0.2s ease; -moz-transition: 0.2s ease; transition: 0.2s ease;
}
.checkbox-1 input[type="checkbox"]:checked ~ label:after { background-color: #23E2AB; }
/* checkbox 1 disable */
.checkbox-1.disable label { border: 1px solid #595C60; }
/* ---- */

/* checkbox 2 */
.checkbox-2 { margin: 24px; float:left; }
.checkbox-2 label { display: block; cursor: pointer; }
.checkbox-2 label {
	width: 14px; height: 14px;
	border: 1px solid #42B0D8;
	-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
	-webkit-transition: 0.2s ease; -moz-transition: 0.2s ease; transition: 0.2s ease;
	box-sizing:border-box; -moz-box-sizing:border-box;
}
.checkbox-2 input[type="checkbox"]:checked ~ label { border: 7px solid #42B0D8; }
/* checkbox 2 disable */
.checkbox-2.disable input[type="checkbox"] ~ label { border: 5px solid #595C60; }
.checkbox-2.disable input[type="checkbox"]:checked ~ label { border: 5px solid #42B0D8; }
/* ---- */

/* checkbox 3 */
.checkbox-3 { margin: 48px; float:left; }
.checkbox-3 label {
	display: block;
	cursor: pointer;
}
.checkbox-3 label {
	width: 28px; height: 28px;
	border: 2px solid #ffffff;
	-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
	-webkit-transition: 0.2s ease; -moz-transition: 0.2s ease; transition: 0.2s ease;
	box-sizing:border-box; -moz-box-sizing:border-box;
}
.checkbox-3 input[type="checkbox"]:checked ~ label { border: 8px solid #ffffff; }
/* checkbox 3 disable */
.checkbox-3.disable input[type="checkbox"] ~ label { border: 2px solid #E75845; }
.checkbox-3.disable input[type="checkbox"]:checked ~ label { border: 8px solid #E75845; }
/* ---- */

/* checkbox 4 */
.checkbox-4 { margin: 48px; float:left; }
.checkbox-4 label { display: block;	cursor: pointer; }
.checkbox-4 label {
	position: relative;
	width: 28px; height: 28px;
	border: 2px solid #ffffff;
	-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
	-webkit-transition: 0.2s ease; -moz-transition: 0.2s ease; transition: 0.2s ease;
	box-sizing:border-box; -moz-box-sizing:border-box;
}
.checkbox-4 label:after {
	position: absolute;
	display: block;
	content: '';
	width: 0px;
	height: 8px;
	top: 4px;
	left: 3px;
	background-color: #ffffff;
	-webkit-transition: 0.1s 0.1s linear; -moz-transition: 0.1s 0.1s linear; transition: 0.1s 0.1s linear;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
}
.checkbox-4 input[type="checkbox"]:checked ~ label:after {
	width: 16px;
	height: 8px;
	top: 10px;
	left: 1px;
	transition-delay: 0s; -webkit-transition-delay: 0s; -moz-transition-delay: 0s;
}
.checkbox-4 label:before {
	position: absolute;
	display: block;
	content: '';
	width: 0px;
	height: 8px;
	top: 10px;
	left: 14px;
	background-color: #ffffff;
	-webkit-transition: 0.1s linear; -moz-transition: 0.1s linear; transition: 0.1s linear;
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
}
.checkbox-4 input[type="checkbox"]:checked ~ label:before {
	width: 24px;
	height: 8px;
	top: 7px;
	left: 6px;
	transition-delay: 0.1s; -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s;
}
/* checkbox 4 disable */
.checkbox-4.disable input[type="checkbox"] ~ label { border: 1px solid #FECD5F; }
.checkbox-4.disable input[type="checkbox"]:checked ~ label { border: 2px solid #FECD5F; }
.checkbox-4.disable input[type="checkbox"]:checked ~ label:after {
	position: absolute;
	display: block;
	content: '';
	width: 16px;
	height: 8px;
	top: 10px;
	left: 1px;
	background-color: #FECD5F;
	transform:rotate(45deg); -webkit-transform:rotate(45deg);
}
.checkbox-4.disable input[type="checkbox"]:checked ~ label:before {
	position: absolute;
	display: block;
	content: '';
	width: 24px;
	height: 8px;
	top: 7px;
	left: 6px;
	background-color: #FECD5F;
	transform:rotate(-45deg); -webkit-transform:rotate(-45deg);
}
/* ---- */

/* checkbox 5 */
.checkbox-5 { margin: 48px 34px; float:left; }
.checkbox-5 label { display: block; cursor: pointer; }
.checkbox-5 label {
	position: relative;
	width: 56px; height: 28px;
	border: 2px solid #ffffff;
	-webkit-transition: 0.2s ease; -moz-transition: 0.2s ease; transition: 0.2s ease;
	box-sizing:border-box; -moz-box-sizing:border-box;
}
.checkbox-5 label:after {
	position: absolute;
	display: block;
	content: '';
	width: 26px;
	height: 24px;
	background-color: #14CC97;
}
.checkbox-5 label:before {
	position: absolute;
	display: block;
	content: '';
	width: 26px;
	height: 24px;
	right: 0;
	background-color: #E75845;
}
.checkbox-5 label span {
	position: absolute;
	width: 26px; height: 24px;
	background-color: #ffffff;
	-webkit-transition: 0.2s ease; -moz-transition: 0.2s ease; transition: 0.2s ease;
	z-index: 10;
	left: 0;
}
.checkbox-5 input[type="checkbox"]:checked ~ label span { left: 26px; }
/* checkbox 5 disable */
.checkbox-5.disable input[type="checkbox"] ~ label { border: 2px solid #35383C; }
.checkbox-5.disable input[type="checkbox"] ~ label span { background-color: #35383C; }
.checkbox-5.disable input[type="checkbox"] ~ label:before { background-color: #FA6F57; }
.checkbox-5.disable input[type="checkbox"]:checked ~ label { border: 2px solid #35383C; }
.checkbox-5.disable input[type="checkbox"]:checked ~ label span { background-color: #35383C; }
.checkbox-5.disable input[type="checkbox"]:checked ~ label:after { background-color: #23E2AB; }
/* ---- */

/* checkbox 6 */
.checkbox-6 { margin: 48px 34px; float:left; }
.checkbox-6 label {
	position: relative;
	width: 56px; height: 56px;
	border: 2px solid #35383C;
	-webkit-transition: 0.2s ease; -moz-transition: 0.2s ease; transition: 0.2s ease;
	box-sizing:border-box; -moz-box-sizing:border-box;
	-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
	overflow: hidden;
	display: block;
	cursor: pointer;
}
.checkbox-6 label:after {
	position: absolute;
	display: block;
	content: '';
	width: 6px;
	height: 6px;
	top: 18px;
	left: 10px;
	background-color: #35383C;
	-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
}
.checkbox-6 label:before {
	position: absolute;
	display: block;
	content: '';
	width: 6px;
	height: 6px;
	top: 18px;
	left: 35px;
	background-color: #35383C;
	-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
}
.checkbox-6 label span {
	position: absolute;
	width: 22px;
	z-index: 10;
	top: 28px;
	left: 12px;
}
.checkbox-6 label span:after {
	position: absolute;
	display: block;
	content: '';
	width: 22px; height: 11px;
	-webkit-transition-property: top, height, border; -moz-transition-property: top, height, border; transition-property: top, height, border;
	-webkit-transition-duration: 0.2s, 0.2s, 0s; -moz-transition-duration: 0.2s, 0.2s, 0s; transition-duration: 0.2s, 0.2s, 0s;
	-webkit-transition-delay: 0.2s, 0.2s, 0.2s; -moz-transition-delay: 0.2s, 0.2s, 0.2s; transition-delay: 0.2s, 0.2s, 0.2s;
	-webkit-border-radius: 22px 22px 0 0; -moz-border-radius: 22px 22px 0 0; border-radius: 22px 22px 0 0;
	border: 3px solid #35383C;
	border-bottom: none;
	top: 0;
	left: 0;
}
.checkbox-6 input[type="checkbox"]:checked ~ label span:after {
	height: 0px;
	top: 8px;
	border: 0px solid #35383C;
	-webkit-transition-property: top, height, border; -moz-transition-property: top, height, border; transition-property: top, height, border;
	-webkit-transition-duration: 0.2s, 0.2s, 0s; -moz-transition-duration: 0.2s, 0.2s, 0s; transition-duration: 0.2s, 0.2s, 0s;
	-webkit-transition-delay: 0s, 0s, 0.25s; -moz-transition-delay: 0s, 0s, 0.25s; transition-delay: 0s, 0s, 0.25s;
}
.checkbox-6 label span:before {
	position: absolute;
	display: block;
	content: '';
	width: 22px; height: 0;
	-webkit-transition-property: top, height, border; -moz-transition-property: top, height, border; transition-property: top, height, border;
	-webkit-transition-duration: 0.2s, 0.2s, 0s; -moz-transition-duration: 0.2s, 0.2s, 0s; transition-duration: 0.2s, 0.2s, 0s;
	-webkit-transition-delay: 0s, 0s, 0.25s; -moz-transition-delay: 0s, 0s, 0.25s; transition-delay: 0s, 0s, 0.25s;
	-webkit-border-radius: 0 0 22px 22px; -moz-border-radius: 0 0 22px 22px; border-radius: 0 0 22px 22px;
	border: 0px solid #35383C;
	top: 8px;
	left: 0;
}
.checkbox-6 input[type="checkbox"]:checked ~ label span:before {
	height: 11px;
	top: 4px;
	border: 3px solid #35383C;
	border-top: 0px solid #35383C;
	-webkit-transition-property: top, height, border; -moz-transition-property: top, height, border; transition-property: top, height, border;
	-webkit-transition-duration: 0.2s, 0.2s, 0s; -moz-transition-duration: 0.2s, 0.2s, 0s; transition-duration: 0.2s, 0.2s, 0s;
	-webkit-transition-delay: 0.2s, 0.2s, 0.2s; -moz-transition-delay: 0.2s, 0.2s, 0.2s; transition-delay: 0.2s, 0.2s, 0.2s;
}
/* checkbox 6 disable */
.checkbox-6.disable input[type="checkbox"] ~ label,
.checkbox-6.disable input[type="checkbox"] ~ label span:after,
.checkbox-6.disable input[type="checkbox"] ~ label span:before { border-color: #D84656; }
.checkbox-6.disable input[type="checkbox"] ~ label:before,
.checkbox-6.disable input[type="checkbox"] ~ label:after { background-color: #D84656; }
/* ---- */

.disable label { cursor: not-allowed; }