Hello,readers I had created a simple animated checkbox using Font Awesome ( CSS Bootstrap file), along with pseudo elements, CSS3 Transition property and opacity.
In my example, I had created an unordered list and placed checkbox tag along with the label tag.
Below is the Html code:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Checkbox using CSS3</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Creating <span>Animated</span> Checkbox</h1>
<div class="section" style=" margin-left:27px;">
<h2>
<i class="fa fa-question-circle"></i>
What is your profession?
</h2>
<ul >
<li><input id="manager" type="checkbox" name="manager">
<label for="manager">Project Manager</label>
</li>
<li><input id="Webdesigner" type="checkbox" name="Webdesigner">
<label for="Webdesigner">Web Designer</label>
</li>
<li><input id="Webdeveloper" type="checkbox" name="Webdeveloper">
<label for="Webdeveloper">Web Developer</label>
</li>
</ul>
</div>
</div>
</body>
</html>
Below is the CSS Code:-
body{
background: #b3d4fc none repeat scroll 0 0;
}
h1{
font-size: 40px;
font-weight: 600;
text-align: center;
}
h1 span{
color: #2980b9;
font-weight: bold;
}
h2{
font-size: 30px;
font-weight: 300;
}
ul li {
font-family: "Lato";
list-style: outside none none;
margin: 10px auto;
}
/*Hide the Odinary Checkbox*/
input[type="checkbox"]{
display: none;
color: #222;
}
/*Chechbox icons*/
label {
color:black;
cursor: pointer;
font-size: 30px;
padding: 16px 28px 0 0;
position: relative;
}
label::before {
content: '\f096';
}
label::before, label::after {
font-family: FontAwesome;
font-size: 50px;
left: -45px;
position: absolute;
top: 9px;
}
label::after {
color: #6c5300;
content: '\f00c';
font-size: 27px;
left: -42px;
max-width: 0;
opacity: 0.5;
overflow: hidden;
top: 16px;
transition: all 0.5s ease 0s;
}
/* Animating the Checkbox Icons*/
input[type="checkbox"]:checked + label::after {
margin-right: 90px;
max-width: 25px;
opacity: 1;
width: 25px;
}
In the CSS code I had added style to the list and the label tags using the pseudo code before and after for this we need to set the checkbox font to font-awesome basically for icon. Instead of using the icon tag I have used unicode version with the Transition and opacity property to show and the hide the icon used.
In the final step I had set the text-box and after pseudo code for checkbox by giving it the max-width of 25px and opacity to 1 for the check icon when once clicked.
Conclusion:-
With the use of CSS3 I had created creative checkbox using the pseudo elements,Transition and animation properties that are interactive, simple to understand wihout the using javascript.
Note:-
Some browsers with the older versions of IE do not support animation but In the browsers such as in Safari 3.2+,Chrome ,Firefox 4+, Opera 10.5+, and IE 10 it can easily work.
0 Comment(s)