I'm trying to make a checkbox but I have no idea how to make it with a cross (X) instead of the tick. Any idea how I can edit this??
Here's my current working code...
.checkbox {
padding-left: 20px;
}
.checkbox label {
display: inline-block;
position: relative;
padding-left: 5px;
}
.checkbox label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 0;
margin-left: -20px;
border: 1px solid #cccccc;
border-radius: 3px;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.checkbox label::after {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: 0;
top: 0;
margin-left: -20px;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: #555555;
}
.checkbox input[type="checkbox"] {
opacity: 0;
}
.checkbox input[type="checkbox"]:focus + label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.checkbox input[type="checkbox"]:checked + label::after {
font-family: 'FontAwesome';
content: "\f00c";
}
.checkbox input[type="checkbox"]:disabled + label {
opacity: 0.65;
}
.checkbox input[type="checkbox"]:disabled + label::before {
background-color: #eeeeee;
cursor: not-allowed;
}
.checkbox.checkbox-circle label::before {
border-radius: 50%;
}
.checkbox.checkbox-inline {
margin-top: 0;
}
.checkbox-primary input[type="checkbox"]:checked + label::before {
background-color: #428bca;
border-color: #428bca;
}
.checkbox-primary input[type="checkbox"]:checked + label::after {
color: #fff;
}
.checkbox-danger input[type="checkbox"]:checked + label::before {
background-color: #d9534f;
border-color: #d9534f;
}
.checkbox-danger input[type="checkbox"]:checked + label::after {
color: #fff;
}
.checkbox-info input[type="checkbox"]:checked + label::before {
background-color: #5bc0de;
border-color: #5bc0de;
}
.checkbox-info input[type="checkbox"]:checked + label::after {
color: #fff;
}
.checkbox-warning input[type="checkbox"]:checked + label::before {
background-color: #f0ad4e;
border-color: #f0ad4e;
}
.checkbox-warning input[type="checkbox"]:checked + label::after {
color: #fff;
}
.checkbox-success input[type="checkbox"]:checked + label::before {
background-color: #5cb85c;
border-color: #5cb85c;
}
.checkbox-success input[type="checkbox"]:checked + label::after {
color: #fff;
}
.radio {
padding-left: 20px;
}
.radio label {
display: inline-block;
position: relative;
padding-left: 5px;
}
.radio label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 0;
margin-left: -20px;
border: 1px solid #cccccc;
border-radius: 50%;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out;
transition: border 0.15s ease-in-out;
}
.radio label::after {
display: inline-block;
position: absolute;
content: " ";
width: 11px;
height: 11px;
left: 3px;
top: 3px;
margin-left: -20px;
border-radius: 50%;
background-color: #555555;
-webkit-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-o-transform: scale(0, 0);
transform: scale(0, 0);
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
}
.radio input[type="radio"] {
opacity: 0;
}
.radio input[type="radio"]:focus + label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.radio input[type="radio"]:checked + label::after {
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
.radio input[type="radio"]:disabled + label {
opacity: 0.65;
}
.radio input[type="radio"]:disabled + label::before {
cursor: not-allowed;
}
.radio.radio-inline {
margin-top: 0;
}
.radio-primary input[type="radio"] + label::after {
background-color: #428bca;
}
.radio-primary input[type="radio"]:checked + label::before {
border-color: #428bca;
}
.radio-primary input[type="radio"]:checked + label::after {
background-color: #428bca;
}
.radio-danger input[type="radio"] + label::after {
background-color: #d9534f;
}
.radio-danger input[type="radio"]:checked + label::before {
border-color: #d9534f;
}
.radio-danger input[type="radio"]:checked + label::after {
background-color: #d9534f;
}
.radio-info input[type="radio"] + label::after {
background-color: #5bc0de;
}
.radio-info input[type="radio"]:checked + label::before {
border-color: #5bc0de;
}
.radio-info input[type="radio"]:checked + label::after {
background-color: #5bc0de;
}
.radio-warning input[type="radio"] + label::after {
background-color: #f0ad4e;
}
.radio-warning input[type="radio"]:checked + label::before {
border-color: #f0ad4e;
}
.radio-warning input[type="radio"]:checked + label::after {
background-color: #f0ad4e;
}
.radio-success input[type="radio"] + label::after {
background-color: #5cb85c;
}
.radio-success input[type="radio"]:checked + label::before {
border-color: #5cb85c;
}
.radio-success input[type="radio"]:checked + label::after {
background-color: #5cb85c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="container">
<h2>Checkboxes</h2>
<form role="form">
<div class="row">
<div class="col-md-4">
<fieldset>
<div class="checkbox checkbox-danger">
<input id="checkbox6" type="checkbox" checked="">
<label for="checkbox6">
Check me out
</label>
</div>
</fieldset>
</div>
</div>
</form>
</div>
Change content content: "\f00d"; to .checkbox input[type="checkbox"]:checked + label::after class.
.checkbox input[type="checkbox"]:checked + label::after {
font-family: 'FontAwesome';
content: "\f00d";
}
Change content:"\f00d" into .checkbox input[type="checkbox"]:checked + label::after
or add add other class for that like you suggested
.checkbox.error-checkbox input[type="checkbox"]:checked + label::after {
content: "\f00d";
}
.checkbox {
padding-left: 20px;
}
.checkbox label {
display: inline-block;
position: relative;
padding-left: 5px;
}
.checkbox label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 0;
margin-left: -20px;
border: 1px solid #cccccc;
border-radius: 3px;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.checkbox label::after {
display: inline-block;
position: absolute;
width: 19px;
height: 19px;
left: 0;
top: 0;
margin-left: -20px;
padding-left: 0;
padding-top: 0;
font-size: 11px;
color: #555555;
line-height: 19px;
text-align: center;
}
.checkbox input[type="checkbox"] {
opacity: 0;
}
.checkbox input[type="checkbox"]:focus + label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.checkbox input[type="checkbox"]:checked + label::after {
font-family: 'FontAwesome';
content: "\f00c";
}
.checkbox.error-checkbox input[type="checkbox"]:checked + label::after {
content: "\f00d";
}
.checkbox-danger input[type="checkbox"]:checked + label::before {
background-color: #d9534f;
border-color: #d9534f;
}
.checkbox-danger input[type="checkbox"]:checked + label::after {
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="container">
<h2>Checkboxes</h2>
<form role="form">
<div class="row">
<div class="col-md-4">
<fieldset>
<div class="checkbox checkbox-danger error-checkbox">
<input id="checkbox6" type="checkbox" checked="">
<label for="checkbox6">
Check me out
</label>
</div>
Related
This question already has answers here:
How to style a checkbox using CSS
(43 answers)
Closed 7 months ago.
How do you style checkbox using only CSS? I want checkboxes with a background color of my choice, and appear a cross mark when they are checked, instead of a checkmark.
/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
padding-left: 1.95em;
cursor: pointer;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left: 0; top: 0;
width: 1.25em; height: 1.25em;
border: 2px solid #ccc;
background: #fff;
border-radius: 4px;
box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
content: '✔';
position: absolute;
top: .1em; left: .3em;
font-size: 1.3em;
line-height: 0.8;
color: #09ad7e;
transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
[type="checkbox"]:checked + label:after {
opacity: 1;
transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
box-shadow: none;
border-color: #bbb;
background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {
color: #999;
}
[type="checkbox"]:disabled + label {
color: #aaa;
}
/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
border: 2px dotted blue;
}
/* hover style just for information */
label:hover:before {
border: 2px solid #4778d9!important;
}
body {
font-family: "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif;
color: #777;
}
h1, h2 {
margin-bottom: .25em;
font-weight: normal;
text-align: center;
}
h2 {
margin: .25em 0 2em;
color: #aaa;
}
form {
width: 7em;
margin: 0 auto;
}
.txtcenter {
margin-top: 4em;
font-size: .9em;
text-align: center;
color: #aaa;
}
.copy {
margin-top: 2em;
}
.copy a {
text-decoration: none;
color: #4778d9;
}
<form action="#">
<p>
<input type="checkbox" id="test1" />
<label for="test1">India</label>
</p>
<p>
<input type="checkbox" id="test2" checked="checked" />
<label for="test2">USA</label>
</p>
<p>
<input type="checkbox" id="test3" checked="checked" />
<label for="test3">Japan</label>
</p>
</form>
<div class="checkbox">
<input name="filter_price0" id="offer_407" type="checkbox" value="407" hidden >
<label for="offer_407">
Below 500 Rs
</label>
</div>
<style>
.checkbox input[type="checkbox"]:checked + label:before {
background-color: #424242;
border-color: #424242;
content: "\2713";
display: inline-block;
text-align: center;
color:#fff;
}
li{
list-style-type:none;
margin-top:10px;
}
.checkbox label{
cursor:pointer;
}
.checkbox label:before {
content: "";
cursor:pointer;
display: inline-block;
position: absolute;
width: 20px;
height: 20px;
left: 0;
border: 1px solid #cccccc;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
</style>
for demo you can click here fiddle demo, and next time post some code which you tryed
Had the same question - found a nice solution - check out answers in Stackoverflow - no one has this one nice trick.
Here it is
input[type=checkbox].agb {
all: unset;
/* rest of styles here */
}
It sets all Browser generated css styles to none and you are able to style the checkbox from scratch like you want to have it without any label hacks or something.
Cool?
I'll give you an example of a simple custom checkbox of mine.
input[type=checkbox].agb {
all: unset;
width: 32px;
height: 32px;
margin-right: 5px;
display: block;
background: var(--color-2);
float: left;
}
input[type=checkbox].agb:checked {
background: var(--color-4);
color: var(--color-2)
}
input[type=checkbox].agb:checked::after {
content: "✔";
display: block;
font-size: 26px;
padding-left: 5px;
}
Im styling 3 checkboxes in contact-form-7
this is the code of contact
<div class="form-group checkbox">
[checkbox participated_2016 default:1 "I Participated at Mercy Ships Cargo Day 2016"]
</div>
<div class="form-group checkbox">
[checkbox want_to_participate default:1 "I Want to participate to Mercy Ships Cargo Day 2017"]
</div>
<div class="form-group checkbox">
[checkbox join_mailing default:1 "Join Cargo Day mailing list"]
</div>
and i putted this css to style it
.checkbox .wpcf7-list-item span {
display: inline-block;
position: relative;
padding-left: 15px;
}
.checkbox .wpcf7-list-item span::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 0;
margin-left: -20px;
border: 1px solid #cccccc;
border-radius: 3px;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.checkbox .wpcf7-list-item span::after {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: 0;
top: 0;
margin-left: -20px;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: #0cf !important;
}
.checkbox .wpcf7-list-item input[type="checkbox"] {
opacity: 0;
}
.checkbox .wpcf7-list-item input[type="checkbox"]:focus + span::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.checkbox .wpcf7-list-item input[type="checkbox"]:checked + span::after {
font-family: 'FontAwesome';
content: "\f00c";
color: #0cf;
}
.checkbox .wpcf7-list-item input[type="checkbox"]:disabled + span {
opacity: 0.65;
}
.checkbox .wpcf7-list-item input[type="checkbox"]:disabled + span::before {
background-color: #eeeeee;
cursor: not-allowed;
}
.checkbox.checkbox-circle span::before {
border-radius: 50%;
}
.checkbox.checkbox-inline {
margin-top: 0;
}
.checkbox-primary input[type="checkbox"]:checked + span::before {
background-color: #428bca;
border-color: #428bca;
}
.checkbox-primary input[type="checkbox"]:checked + span::after {
color: #fff;
}
.checkbox .wpcf7-list-item input:focus, .checkbox input:active:focus, .checkbox input.active:focus {
outline: none;
box-shadow: none;
}
but when i do this styling whatever checkbox i click on, all three are selected and deselected in same time.
Does anyone know why?
There is a problem with me that the icons is not showing in the browser.
I can not able to find out that my browser doesn't have the Fontawesome font but even not showing when Internet is connected Please anyone can help me for this.
.checkbox {
padding-left: 20px; }
.checkbox label {
display: inline-block;
position: relative;
padding-left: 5px; }
.checkbox label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 0;
margin-left: -20px;
border: 1px solid #cccccc;
border-radius: 0px;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
.checkbox label::after {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: 0;
top: 0;
margin-left: -20px;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: #555555; }
.checkbox input[type="checkbox"] {
opacity: 0; }
.checkbox input[type="checkbox"]:focus + label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; }
.checkbox input[type="checkbox"]:checked + label::after {
content: "\f00c";
font-family: 'FontAwesome'; }
.checkbox input[type="checkbox"]:disabled + label {
opacity: 0.65; }
.checkbox input[type="checkbox"]:disabled + label::before {
background-color: #eeeeee;
cursor: not-allowed; }
.checkbox-primary input[type="checkbox"]:checked + label::before {
background-color: #fff;
border-color: #adadad; }
.checkbox-primary input[type="checkbox"]:checked + label::after {
color: #fff; }
<div class="checkbox checkbox-primary">
<input id="checkbox2" type="checkbox" checked="">
<label for="checkbox2" >
Primary \f00c
</label>
</div>
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
Fonteawesome expects the font files packaged with its css to be in a specific directory location in comparison to the css, take a look at the first few lines of the css file where it creates the font family for specific font file types. If your directory is different you'll need to adjust the directory location inside the font awesome css, font families.
You should install the font-awesome fonts files like .eot, .ttf, .woff and .svg and font-awesome css in local host after that icons will be rendered on browser.
I styled up this checkbox to look like a switch. I would like to put the words "ON" and "OFF" inside of it. That's what I'm having trouble with.
Here is the codepen: http://codepen.io/anon/pen/BKMErO
CSS:
.switch-field {
display: table-cell;
vertical-align: middle;
}
input.switch {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
input.switch + label {
background-color: #f0f0f0;
border: 1px solid #ccc;
display: block;
position: relative;
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.switch + label, input.switch + label:before, input.switch + label:after {
-webkit-border-radius: 2.4em;
-moz-border-radius: 2.4em;
-ms-border-radius: 2.4em;
-o-border-radius: 2.4em;
border-radius: 2.4em;
}
input.switch + label {
background-color: #f0f0f0;
border: 1px solid #ccc;
width: 4.8em;
height: 2.4em;
overflow: hidden;
}
input.switch + label:before, input.switch + label:after {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
content: "";
}
input.switch + label:before {
background-color: #bbb;
right: 0;
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
-o-transition: background 0.3s;
transition: background 0.3s;
}
input.switch + label:after {
background-color: #fff;
width: 2.4em;
width: calc(2.4em - 2px);
-webkit-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
-webkit-transition: margin 0.3s;
-moz-transition: margin 0.3s;
-o-transition: margin 0.3s;
transition: margin 0.3s;
}
input.switch:checked + label:before {
background-color: green;
}
input.switch:checked + label:after {
margin-left: 2.5em;
}
HTML:
<div class="switch-field">
<input id="cmn-toggle-1" class="switch" type="checkbox">
<label for="cmn-toggle-1"></label>
</div><!-- /.switch-field -->
Give this a try
http://codepen.io/Atula/pen/ZWwdmm?editors=0100
css
content: 'ON';
padding: 10px 0;
text-align:center;
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
.switch-field {
display: table-cell;
vertical-align: middle;
}
input.switch {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
input.switch + label {
background-color: #f0f0f0;
border: 1px solid #ccc;
display: block;
position: relative;
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.switch + label, input.switch + label:before, input.switch + label:after {
-webkit-border-radius: 2.4em;
-moz-border-radius: 2.4em;
-ms-border-radius: 2.4em;
-o-border-radius: 2.4em;
border-radius: 2.4em;
}
input.switch + label {
background-color: #f0f0f0;
border: 1px solid #ccc;
width: 4.8em;
height: 2.4em;
overflow: hidden;
}
input.switch + label:before, input.switch + label:after {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
content: "";
}
input.switch + label:before {
background-color: #bbb;
right: 0;
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
-o-transition: background 0.3s;
transition: background 0.3s;
}
input.switch + label:after {
background-color: #fff;
width: 2.4em;
width: calc(2.4em - 2px);
-webkit-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
-webkit-transition: margin 0.3s;
-moz-transition: margin 0.3s;
-o-transition: margin 0.3s;
transition: margin 0.3s;
}
input.switch:checked + label:before {
background-color: green;
content :'ON';
text-align :left;
color:#fff;
padding:5px
}
input.switch:checked + label:after {
margin-left: 2.5em;
text-align :right;
}
</style>
</head>
<body>
<div class="switch-field">
<input id="cmn-toggle-1" class="switch" type="checkbox">
<label for="cmn-toggle-1"></label>
</div><!-- /.switch-field -->
</body>
</html>
I am having a problem over-riding the bootstrap css for checkboxes and input checkboxes. I have a checkboxlist and the bootstraps styling is over-riding my own css file. I have doubled checked and made sure that it wasn't bootstraps themes causing the issue but it is the bootstraps css.
I have also tried using !important
in my css and it still gets over-ridden, I even placed my css file after the bootstraps css, tried putting my css before it, even tried
input[type=checkbox]
and that did nothing as well.
Here is the css I'm trying to use to override the bootstrap
.CheckBoxSubjects td {
border-style: solid;
border: 1px solid #78E389;
width: 122px;
height: 27px;
border-radius: 5px;
background-color:#78E389;
}
Here's the fiddle of the code I used. Hope this helps for you.
http://jsfiddle.net/cLaty/
HTML
<div class="checkbox pull-right">
<input type="checkbox" id="remember" /><label for="remember">Remember me</label>
</div>
CSS
input[type="checkbox"]:not(:checked),
input[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
input[type="checkbox"]:not(:checked) + label,
input[type="checkbox"]:checked + label {
position: relative;
padding-left: 25px;
cursor: pointer;
}
/* checkbox aspect */
input[type="checkbox"]:not(:checked) + label:before,
input[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left:0; top: 2px;
width: 17px; height: 17px;
border: 1px solid #aaa;
background: #f8f8f8;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
/* checked mark aspect */
input[type="checkbox"]:not(:checked) + label:after,
input[type="checkbox"]:checked + label:after {
content: '✔';
position: absolute;
top: 0; left: 4px;
font-size: 14px;
color: #4cc0c1;
transition: all .2s;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-ms-transition: all .2s;
-o-transition: all .2s;
}
/* checked mark aspect changes */
input[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
input[type="checkbox"]:checked + label:after {
opacity: 1;
transform: scale(1);
}
/* disabled checkbox */
input[type="checkbox"]:disabled:not(:checked) + label:before,
input[type="checkbox"]:disabled:checked + label:before {
box-shadow: none;
border-color: #999999;
background-color: #ddd;
}
input[type="checkbox"]:disabled:checked + label:after {
color: #999;
}
input[type="checkbox"]:disabled + label {
color: #aaa;
}
/* accessibility */
input[type="checkbox"]:checked:focus + label:before,
input[type="checkbox"]:not(:checked):focus + label:before {
border: inherit;
}