It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Written by 4 April 2021
Giving a special style to different parts of the website will increase the beauty and attractiveness of your website. In the following code we have a special style for checkboxes. In this code inactive and active checkboxes are shown and when an active checkbox is selected the lines animate! The cross symbol rotates and the checkbox gets selected. The same rotation occurs and then the cross symbol disappears when the box is unselected.
<!-- this script is provided by http://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: 0;
opacity: 0.01;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
padding-left: 2.3em;
font-size: 1.05em;
line-height: 1.7;
cursor: pointer;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 1.4em;
height: 1.4em;
border: 1px solid #aaa;
background: #FFF;
border-radius: .2em;
box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 rgba(203, 34, 237, .2);
-webkit-transition: all .275s;
transition: all .275s;
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
content: '✕';
position: absolute;
top: .525em;
left: .18em;
font-size: 1.375em;
color: #CB22ED;
line-height: 0;
-webkit-transition: all .2s;
transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
-webkit-transform: scale(0) rotate(45deg);
transform: scale(0) rotate(45deg);
}
[type="checkbox"]:checked + label:after {
opacity: 1;
-webkit-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
/* Disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
box-shadow: none;
border-color: #bbb;
background-color: #e9e9e9;
}
[type="checkbox"]:disabled:checked + label:after {
color: #777;
}
[type="checkbox"]:disabled + label {
color: #aaa;
}
/* Accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 6px rgba(203, 34, 237, .2);
}
/*
* Useless styles, just for demo design
*/
body {
font-family: "Open Sans", "Segoe WP", "Segoe UI", Helvetica, Arial, sans-serif;
text-align: center;
color: #34495E;
background: #FCFDFD;
}
a[href^="#"] {
color: #34495E;
text-decoration: underline;
}
h1 {
margin-top: 1em;
}
h2 {
margin-top: 0;
margin-bottom: 2em;
color: #CB22ED;
font-weight: normal;
}
form {
width: 120px;
margin: 0 auto 55px;
text-align: left;
}
div p:first-child {
font-weight: bold;
font-size: 1.2em;
}
p {
color: #aaa;
}
p a {
color: inherit;
}
p + p {
margin-top: 3em;
}
form p {
margin: 15px 0;
color: #34495E;
}
a[href^="#"] {
color: #1da1f2;
}
.btn.btn {
display: inline-block;
padding: 8px 24px;
text-decoration: none;
border-radius: 40px;
background: #34495E;
color: #F2F2F2;
transition: all .4s;
}
.btn.btn:hover,
.btn.btn:focus {
background: #000;
}
h1{
font-size:18px;
}
</style>
<form action="#">
<p>
<input type="checkbox" id="test1" />
<label for="test1">Red</label>
</p>
<p>
<input type="checkbox" id="test2" checked="checked" />
<label for="test2">Yellow</label>
</p>
<p>
<input type="checkbox" id="test3" checked="checked" disabled="disabled" />
<label for="test3">Green</label>
</p>
<p>
<input type="checkbox" id="test4" disabled="disabled" />
<label for="test4">Brown</label>
</p>
</form><a target='_blank' href='http://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!