Styled Checkboxes with pure CSS that work upto IE5 and cross browser
Styled checkboxes with pure CSS
The
idea is that using the ':before' pseudo-class allows us to define the
checkbox style in pure CSS, using the 'content' attribute to define the
check symbol used and the ':checked' pseudo-selector to switch it.
':before' has to be on the subsequent element so that we can select it
properly (you can't define ':before' for <input> elements).
IE
8 doesn't support ':checked' so we switch a class on it using jQuery
and IE 6 & 7 don't support ':before' so we add a <span> to do
its job.
IE fallbacks currently don't work! Feel free to suggest fixes :-)
Demo
CSS
<style type="text/css">
.ckbox
{
width: 25px;
height: 25px;
}
.custom-checkbox
{
position: relative;
display: inline-block;
}
.custom-checkbox > .box
{
position: relative;
display: block;
width: 25px;
height: 25px;
background-color: #E5E5E5;
padding: 0px;
margin: 0px;
}
.custom-checkbox > .box > .tick
{
position: absolute;
left: 4px;
top: 7px;
width: 14px;
height: 6px;
border-bottom: 4px solid #000;
border-left: 4px solid #000;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
display: none;
}
.custom-checkbox > input:checked + .box > .tick
{
display: block;
}
.custom-checkbox > input
{
position: absolute;
outline: none;
left: 0;
top: 0;
padding: 0;
width: 25px;
height: 25px;
border: none;
margin: 0;
opacity: 0;
z-index: 1;
}
</style>
Script
//Add jquery file
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
//Checkbox Check click call the function
<script type="text/javascript">
GetSelectedValue();
function GetSelectedValue() {
var final = '';
$('.ckbox:checked').each(function() {
var values = $(this).val();
final += values + ",";
});
alert(final);
}
</script>
HTML
<body>
<form action="" method="GET">
<table style="background-color: #E5E5E5;">
<tr>
<td>
<span class="custom-checkbox">
<input onclick="GetSelectedValue();" id="fileItem" name="fileItem"
type="checkbox" class="ckbox" value="1" checked="checked" />
<span class="box" ><span class="tick"></span></span>
</span>
<input id="fileId" name="fileId" type="hidden" value="" />
</td>
<td>
<label for="fileItem" title="">Check</label>
<div class="custom-checkbox">
chkChecked
</div>
</td>
</tr>
<tr>
<td>
<span class="custom-checkbox">
<input onclick="GetSelectedValue();" id="fileItem1" name="fileItem1" type="checkbox" class="ckbox" value="2" />
<span class="box" ><span class="tick"></span></span>
</span>
<input id="fileId" name="fileId" type="hidden" value="" />
</td>
<td>
<label for="fileItem1" title="">Check</label>
<div class="custom-checkbox">
chkChecked
</div>
</td>
</tr>
</table>
</body>
Download Link
