javascript - Replace html checkbox with X -
i'm trying replace checkbox on form red x. basically, want the form functionality stay same don't want display box check rather red x click. i'm not sure how replace checkbox icon though.
you can't replace because browser-specific implementation , notice looks different in different browsers. however, little bit of effort can write own. minimalistic example create following html structure...
<div> <span class="chk" unchecked></span> <input type="checkbox" /> </div>
hide checkbox , style span
way want to...
.chk { display:inline-block; width:13px; height:13px; border-radius: 3px; padding:2px; border:1px #ccc solid; cursor:pointer; } .chk[checked]{ background:url(your-checked_image.png); } .chk[unchecked]{ background:url(your_own_image.png); } input[type=checkbox] { display:none; }
and then, need intersect click event change background image, keep track of checked state , toggle checkbox. notice still need checkbox if hidden in case need submit state using form tag. of jquery makes pretty easy...
$(function(){ $('.chk').click(function(){ if($(this).attr('checked') == undefined) { $(this).attr('checked',""); $(this).removeattr('unchecked'); $('input[type=checkbox]').prop('checked', true); } else { $(this).removeattr('checked'); $(this).attr('unchecked',""); $('input[type=checkbox]').prop('checked', false); } }); });
i put js fiddler can play with.
Comments
Post a Comment