.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; }
<table style="background-color: #E5E5E5;"> <tr> <td> <span class="custom-checkbox"> <input 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> </td> </tr> </table>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)