Is there a way to make the checkbox html control display larger, maybe with CSS?

Question

Possible Duplicate:
Checkbox size

I'm trying to make some checkboxes display larger in most modern browsers (FF10, Chrome, IE9+)

I tried setting the width/height but that only works in FF, not in Chrome or IE.

Any suggestions?

If you want consistency and a high degree of customization with your checkboxes, you can toggle an image and tie that to a hidden form field. This is what most plugins do, behind the scenes. — Blazemonger, Apr 25 '12 at 14:00
@Blazemonger Why hidden? A visible `` would be perfect for that. — Mr Lister, Apr 25 '12 at 14:15
@MrLister `input type="image"` will try to submit the form when you click it, which is not desirable in this case. Of course, you can cancel that with JavaScript, but you're still breaking the tag's intended functionality. — Blazemonger, Apr 25 '12 at 15:25

score 4 · Accepted Answer · answered Apr 25 '12 at 14:14

4

You can use the transform style with a scale function. See http://jsfiddle.net/kwEK6/

This works in many browsers, but, of course, not all...

answered Apr 25 '12 at 14:14

Mr Lister

45,515
15
108
150

3

Yeah; I tried that approach, too, does nothing in Chrome 18, sadly. – David Thomas Apr 25 '12 at 14:18
No? That's odd, my jsFiddle works in all of them, except IE. In IE, you can use `zoom` though. (Note: only able to test on IE7 and 8, not higher, sorry.) – Mr Lister Apr 25 '12 at 14:29
I'm currently on Chrome 18.0.1025.162, on Win XP. It's entirely possible that Vista and Seven, not to mention the Linux flavours (my usual haunt) play more nicely. It definitely works with Firefox, though. =) – David Thomas Apr 25 '12 at 14:33
Strange, I've got 18.0.1025.162 too, and on Win XP even (SP3). Also tested with Safari 5.1 and Opera 11, and really, only IE8 refuses to play. – Mr Lister Apr 25 '12 at 14:37
I am also not seeing any effect. – Marcin Apr 25 '12 at 14:50
no effect on Chrome Version 28.0.1500.95 m, on PC Win7 pro – Slopeside Creative Aug 14 '13 at 18:50

score 0 · Answer 2 · answered Apr 25 '12 at 14:48

0

Or you can try:

height: 30px; 
line-height: 30px; //line-height is same with height make your text is middle.
font-size: 13px; // It's up to you
padding: 10px; // It's up to you

answered Apr 25 '12 at 14:48

score 0 · Answer 3 · edited Sep 26 '12 at 08:59

You can do something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
  <style> 
    .ccs3fl input[type='checkbox'],.ccs3fl input[type='radio'] 
     { 
                filter: alpha(opacity=0); 
                -moz-opacity: 0; 
                -webkit-opacity: 0; 
                opacity: 0; 
                position:absolute; 
                cursor: hand; 
                cursor: pointer; 
     } 
    .ccs3fl input[type='checkbox']+::after,.ccs3fl input[type='radio']+::after 
     { 
                font-wight:bold; 
                border: solid 1px #D9D9D9; 
                border-radius: 3px; 
                vertical-align: middle; 
                content:'\2714'; 
                color:#FFFFFF; 
                background:#FFFFFF; 
     } 
    .ccs3fl input[type='checkbox']:checked+::after ,.ccs3fl input[type='radio']:checked+::after {color:#6599FF;} 
    .ccs3fl input[type='radio']+::after {content:'\25CF';padding:0 3px;} 
    </style></head><body> 

    <form class='ccs3fl'> 
    <input type=checkbox><b></b> My Custom Checkbox
    </form></body></html>

notice:

<b></b>

at the end of checkbox - where should be an empty element placed after each radio/checkbox in order for this to work propertly

Is there a way to make the checkbox html control display larger, maybe with CSS?

3 Answers3