ASP.NET CLOUD: Styled Checkboxes with pure CSS that work upto IE5 and cross browser

Saturday, 21 December 2013

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

https://drive.google.com/file/d/0B7XVDU9gdC-lQnlUV2Fqc3BSYUU/edit?usp=sharing

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)