Hello Readers,In my example I have simply created Radio and Checkbox buttons using Bootstrap framework.
We basically use checkboxes when we need to select one or several options from a given list while radio buttons are used for selecting one option from many.
In this I had created vertical and horizontal checkbox and radio buttons using bootstrap form and button classes. For the icon such as circle and square images along the label tags i had used bootstrap font awesome CSS file.
Below the HTML code:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<title>Radio and Checkbox Button using Bootstrap</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- =First Row start= -->
<div class="row">
<!-- =First col start= -->
<div class="col-xs-12">
<br> Vertical Radio Buttons:
<br>
<div class="btn-group btn-group-vertical" data-toggle="buttons">
<label class="btn active">
<input type="radio" name="gender1" checked>
<i class="fa fa-circle-o fa-2x"></i>
<i class="fa fa-check-circle-o fa-2x"></i>
<span>Male</span>
</label>
<label class="btn">
<input type="radio" name="gender1" checked>
<i class="fa fa-circle-o fa-2x"></i>
<i class="fa fa-check-circle-o fa-2x"></i>
<span>Female</span>
</label>
</div>
</div><!-- =first col end= -->
</div><!-- First row end// -->
<!-- =Second row start= -->
<div class="row">
<!-- =Second col start= -->
<div class="col-xs-12">
<br> Vertical Checkbox Buttons:
<br>
<div class="btn-group btn-group-vertical" data-toggle="buttons">
<label class="btn active">
<input type="checkbox" name="email1" checked>
<i class="fa fa-square-o fa-2x"></i>
<i class="fa fa-check-square-o fa-2x"></i>
<span>Marketing Email</span>
</label>
<label class="btn">
<input type="checkbox" name="email1" checked>
<i class="fa fa-square-o fa-2x"></i>
<i class="fa fa-check-square-o fa-2x"></i>
<span>Alert Email</span>
</label>
<label class="btn">
<input type="checkbox" name="email1" checked>
<i class="fa fa-square-o fa-2x"></i>
<i class="fa fa-check-square-o fa-2x"></i>
<span>Account Email</span>
</label>
</div>
</div><!-- =Second col end// -->
</div><!-- =Second row end// -->
<!-- =Third row start -->
<div class="row">
<!-- =Third col start= -->
<div class="col-xs-12">
<br> Horizonatl Radio Buttons:
<br>
<div class="btn-group btn-group-horizontal" data-toggle="buttons">
<label class="btn active">
<input type="radio" name="gender2" checked>
<i class="fa fa-circle-o fa-2x"></i>
<i class="fa fa-check-circle-o fa-2x"></i>
<span>Male</span>
</label>
<label class="btn">
<input type="radio" name="gender2" checked>
<i class="fa fa-circle-o fa-2x"></i>
<i class="fa fa-check-circle-o fa-2x"></i>
<span>Female</span>
</label>
</div><!-- =Third col end// -->
</div><!-- =Third row end// -->
<!-- =Last row start= -->
<div class="row">
<!-- =Last col start= -->
<div class="col-xs-12">
<br> Vertical Checkbox Buttons:
<br>
<div class="btn-group btn-group-horizonatl" data-toggle="buttons">
<label class="btn active">
<input type="checkbox" name="email2" checked>
<i class="fa fa-square-o fa-2x"></i>
<i class="fa fa-check-square-o fa-2x"></i>
<span>Marketing Email</span>
</label>
<label class="btn">
<input type="checkbox" name="email2" checked>
<i class="fa fa-square-o fa-2x"></i>
<i class="fa fa-check-square-o fa-2x"></i>
<span>Alert Email</span>
</label>
<label class="btn">
<input type="checkbox" name="email2" checked>
<i class="fa fa-square-o fa-2x"></i>
<i class="fa fa-check-square-o fa-2x"></i>
<span>Account Email</span>
</label>
</div>
</div><!-- =Second col end// -->
</div><!-- =Second row end// -->
</div><!-- =container end// -->
</body>
</html>
Below is the CSS Code:-
body{
background-color: #ffffe8;
font-size: 22px;
font-weight: 400;
}
label.btn span {
font-size: 1.5em ;
}
label input[type="radio"] ~ i.fa.fa-circle-o{
color: #c8c8c8; display: inline;
}
label input[type="radio"] ~ i.fa.fa-check-circle-o{
display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-circle-o{
display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-check-circle-o{
color: #7AA3CC; display: inline;
}
label:hover input[type="radio"] ~ i.fa {
color: #7AA3CC;
}
label input[type="checkbox"] ~ i.fa.fa-square-o{
color: #c8c8c8; display: inline;
}
label input[type="checkbox"] ~ i.fa.fa-check-square-o{
display: none;
}
label input[type="checkbox"]:checked ~ i.fa.fa-square-o{
display: none;
}
label input[type="checkbox"]:checked ~ i.fa.fa-check-square-o{
color: #7AA3CC; display: inline;
}
label:hover input[type="checkbox"] ~ i.fa {
color: #7AA3CC;
}
div[data-toggle="buttons"] label.active{
color: #7AA3CC;
}
div[data-toggle="buttons"] label {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 2em;
text-align: left;
white-space: nowrap;
vertical-align: top;
cursor: pointer;
background-color: none;
border: 0px solid
#c8c8c8;
border-radius: 3px;
color: #c8c8c8;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
div[data-toggle="buttons"] label:hover {
color: #7AA3CC;
}
div[data-toggle="buttons"] label:active, div[data-toggle="buttons"] label.active {
-webkit-box-shadow: none;
box-shadow: none;
}
In the CSS code I had added style to the checkbox and radio buttons using Font Awesome (CSS File) and on hover the color of the text changes as applied in my CSS Code. In my example I had also used (~) CSS3 selector with the label input selector which selects icon image(Font Awesome) that are precede by the label input tags.
Conclusion:-
I had created Effective checkbox and radio button using Bootstrap Framework with the HTML5 Tags and CSS3.
Note:- The example will work efficiently on all latest browser versions such as in Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+, and IE 10 it can easily work.
0 Comment(s)