Styled Checkboxes with pure CSS that work upto IE5 and cross browser
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
No comments:
Post a Comment