size checkboxes

Question

Is it possible to make a checkbox large? So far, the sources i've read said that it's nearly impossible.

I've tried Cssclasses and it didn't work either. I don't want to cheat and use a TextBox.

How can I make the checkboxes larger?

Answer 1

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 Safari nor Opera.

If your goal is to just make the clickable area for a 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 when clicking the label.

Answer 2

Consider the fact that checkboxes are a standard form element and users typically know how to interact with them. Altering them (by making them bigger, or styling, or anything) disrupts this common learned behavior and may lead to your users incorrectly completing the form.

Not to mention, as you have found, it's a pain in the butt.

If you are trying to provide a larger area in which to allow the user to check, consider using the <label> element, which will allow the checkbox's supporting text to act as a trigger.

Answer 3

You'll probably have to swap an image out with JavaScript and have a hidden field you're submitting.

This is a very primitive (and untested) example, but it's just to give you the idea. If you're doing a list of checkboxes, then you'll have to get fancy with the value you're storing in the hidden field, like maintaining an array in JavaScript and updating 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 that helps.

Answer 4

I haven't tested this on every browser, but what I found was that the checkbox control renders as a span tag and inside the span is the checkbox.

So even if you apply a cssclass or a style to the asp:checkbox, it actually gets applied to the span, not the checkbox.

So, I found this works 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 another user posted, but it will cause the style to be applied to the checkbox and not its containing span.

Answer 5

some browsers won't let you change much (or in some cases, anything) about how things like checkboxes or radio buttons are rendered, and in any case are inconsistent across browsers. you may be better off replacing with a behavior.

there are a bunch of these. if you use jQuery, there are things like Customize HTML control with jQuery (Checkbox + Radio)

Answer 6

In asp.net a checkbox will become a span with an input of type "checkbox"

In order to resize it, just apply a css class to the asp.net checkbox and add this to your style sheet. the style must be applied to the the embeded input of the checkbox like this :

.ChkBoxClass input {width:25px; height:25px;}