views:

366

answers:

5
+1  Q: 

size checkboxes

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?

+2  A: 

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.

Crescent Fresh
just tested in IE, Firefox, and Chrome, it doesn't work at all... it just adds padding around the checkbox.
blesh
+1 - worked for me in IE
CAbbott
This only makes my clickable area larger. Didn't affect the physical size of the textbox
Eric
@blesh: Ha, really? I just tested in IE6, FF2, and Chrome 2 and it works great. You on Windows I presume? Weird...
Crescent Fresh
I'm working in Asp.net
Eric
@Eric: hold on, what textbox are you referring to? There is only a checkbox in that demo.
Crescent Fresh
sorry..that's what i meant, checkbox. I'm not using a textbox.
Eric
@Eric: Asp.net simply renders that html in the browser. No real magic.
Crescent Fresh
Windows IE8, IE7, Firefox 3, Chrome 2, Opera and Safari. doesn't work. While the clickable area does get larger the graphics stay the same size.
blesh
@blesh: Vista by any chance? I'm on Server 2003 and the graphic increases in size too. Looks great.
Crescent Fresh
+1 though just because I had forgotten AssociatedControlID. Not that it solves the problem, but it is handy to remember.
blesh
it very well could be a Vista issueI'm on vista
Eric
Vista, yes.Just tested on Windows 2003 and Windows XP... it does work there. lol...
blesh
Doesn't work on WinXP IE8 or chrome. The clickable area gets larger, but the checkbox remains the same size. This is not a solution as it appears to be sporadic as to when it works and when it doesn't.
adrianbanks
+2  A: 

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.

Mark Hurd
ASP.NET (Web forms) renders a Label when you use a checkbox control, like this: <input id="ctl02" type="checkbox" name="ctl02" /><label for="ctl02">Some description</label>. Having both the checkbox and label clickable exploit's Fitts' Law, which is a good thing.
RichardOD
I was pretty sure that was the case, but I'm by no means an ASP.NET guy.
Mark Hurd
this does nothing to answer the question. It may be a valid point, but does not answer the question.
levi rosol
A: 

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)

HackedByChinese
+2  A: 

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.

blesh
A: 

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.

chrismay