Dimension flags
You may have to change the image with JavaScript and have a hidden field that you submit.
This is a very primitive (and untested) example, but it just gives you the idea. If you are doing a list of checkboxes, then you will need to know what value you store in a hidden field, for example, maintain an array in JavaScript and update the hidden field with a concatenated list.
<img src="checked.gif" onclick="toggle()" id="imgCheck"/>
<input type="hidden" id="hdnValue" value="true"/>
<script>
function toggle() {
var hdnValue = document.getElementById('hdnValue');
var imgCheck = document.getElementById('imgCheck');
if(hdnValue.value == 'true') {
hdnValue.value = 'false';
imgCheck.src = 'unchecked.gif';
}else{
hdnValue.value = 'true';
imgCheck.src = 'checked.gif';
}
}
</script>
Hope it helps.
source to share
Yes, using css :
<input type="checkbox" class="largerCheckbox" name="checkBox">
<style type="text/css">
input.largerCheckbox
{
width: 30px;
height: 30px;
}
</style>
This works in IE, Firefox and Chrome (2.0.172.43), but not in Safari and Opera.
If your goal is simply to make the clickable area for the checkbox larger, you can use labels:
<asp:CheckBox runat="server" ID="foo" />
<asp:Label runat="server" AssociatedControlID="foo">Click me</asp:Label>
This will toggle the checkbox by clicking the label.
source to share
Keep in mind that checkboxes are a standard form element and users usually know how to interact with them. Changing them (by increasing their size or styling or whatever) breaks this common learned behavior and can lead to your users filling it out incorrectly.
Not to mention, as you found it is a pain in the butt.
If you're trying to provide a large area where you can validate the user, consider using an element <label>
that will allow a text-aware checkbox to act as a trigger.
source to share
I haven't tested this in every browser, but I found that the checkbox is set as a span tag, and within the range is a checkbox.
This way, even if you apply cssclass or style for asp: checkbox, it actually applies to the range, not the checkbox.
So, I found this to work for me:
<input type="checkbox" class="largerCheckbox" name="checkBox">
<style type="text/css">
.largerCheckbox input{
width: 30px;
height: 30px;
}
</style>
This is similar to what the other user posted, but it will cause the style to be applied to the checkbox and not the range that contains it.
source to share
some browsers won't let you change much (or, in some cases, anything) about how things look like checkboxes or radio buttons, and contradict each other in browsers anyway. you might be better off changing your behavior.
there are a bunch of these. if you are using jQuery there are things like Customize HTML Control with jQuery (checkbox + radio)
source to share