Removing padding around [input type=checkbox]

HTML & CSS
1

Could anyone advise on how to remove padding around checkbox in IE? I am not refrring to the padding “style”, but rather the blank space around checkbox (which IE considers to be part of the input-object, even though the actual checkbox is very small).

Thanks in advance…

2

Hmm,

I’ll put this up for anyone else to comment on.


* { margin: 0; padding: 0; }
#box { border: 1px solid black; float: left; }



<div id="box"><input type=checkbox /></div>

My guess is you wouldn’t be able to change it - A lot like Safari’s form elements. You have little control over the way browsers display these elements.

…

3

Aye, unfortunately I don’t think you can remove it. You could possibly replace the checkbox it with some clever JS, but that seems like an awful lot of effort.

Besides, that padding is a good thing: It gives people a bigger target area to aim at with their mouse.

4

If you were to add this to the CSS above then that’ll fix the problem


body {
	font-size: 65%;
}

Basically, your base font size needs to be smaller than height of the checkbox otherwise it will allow enough spacing which will look in appearance like padding.

You could apply this fontsize to the #box style alone if you wish although your global font size will probably take care of this in most cases.

Hope that hopes solve the problem?

5

That doesn’t work for me csswiz. Not in IE6.

6

Even with padding, the target area of a checkbox is very small (especially on a high-resolution monitor). Which is why it is extra important to use the LABEL element type correctly with checkboxes and radio buttons. That makes the whole label text clickable; a major improvment from trying to hit the tiny square or circle. :slight_smile:

7

Oh yeah, that’s strange… I’ve not actually come across that before but does look like there is a default margin that you can’t remove. I’ve tried specifying height’s and paddings explicitly to containers of the input and it’s container but no luck.

Atleast if you use a font-size that is smaller than the checkbox you can get a certain level of consistency, but as for removing margins completely in all browsers, I’d be interested to hear if there is a solution.

8

Yeah, small things may look nice, but if they are hard for the user to click with his/her mouse, what’s the point? Usability should come before beautification.

Here’s some information on how to make forms easier to use:
Simple Tricks for More Usable Forms: Labels
Accessible HTML/XHTML Forms
Creating Accessible Forms

9 
input.checkbox {
	height: 13px;
	width: 13px
}

<input type="checkbox" class="checkbox" />