CSS3 Padlock
A padlock checkbox using css3 and FontAwesome
A padlock checkbox using css3 and FontAwesome
<div>
<div><input class="lockCheckbox" type="checkbox" id="lockCheckbox" />
<label for="lockCheckbox"></label>
</div> /* ---------- FONTAWESOME ---------- *//* ---------- http://fortawesome.github.com/Font-Awesome/ ---------- *//* ---------- http://weloveiconfonts.com/ ---------- */@import url(http://weloveiconfonts.com/api/?family=fontawesome);
body {background: rgb(225, 230, 225);
}
div {position: absolute;
left: 48%;
top: 48%;
}
input.lockCheckbox { visibility: hidden; }
input.lockCheckbox ~ label {
font-family: FontAwesome;
font-size: 2em;
border: 1px solid rgb(100, 100, 200);
width: 1.1em;
height: 1.1em;
display: inline-block;
text-align: center;
border-radius: 10px;
padding-top: 2px;
background-image: linear-gradient(rgb(225, 225, 225), rgb(250, 250, 250) 40%, rgb(150, 150, 150) 70%, rgb(100, 100, 100) 100%);
box-shadow: 0 0 .1em rgb(100, 100, 200);
}
input.lockCheckbox ~ label:hover {
box-shadow: 0 0 .3em rgb(100, 100, 200);
}
input.lockCheckbox ~ label:active {
background-image: linear-gradient(rgb(100, 100, 100), rgb(150, 150, 150) 40%, rgb(225, 225, 225) 70%, rgb(250, 250, 250) 100%);
box-shadow: 0 0 .5em rgb(100, 100, 200);
}
input.lockCheckbox ~ label:before {
color: rgb(100, 50, 50);
content: "\f09c";
}
input.lockCheckbox:checked ~label:before {
color: rgb(50, 100, 50);
content: "\f023";
}