How to align checkboxes and their labels consistently cross-browsers

Question

This is one of the minor CSS problems that plagues me constantly. How do folks around StackOverflow vertically align checkboxes and their labels consistently cross-browser? Whenever I align them right in Safari (usually using vertical-align: baseline on the input), they're completely off in Firefox and IE. Fix it in Firefox, and Safari and IE are inevitably messed up. I waste time on this every time I code a form.

Here's the standard code that I work with:

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>

I usually use Eric Meyer's reset, so form elements are relatively clean of overrides. Looking forward to any tips or tricks that you have to offer!

Answer 1

try vertical-align: middle

also your code seems like it should be:

<form>
    <div>
        <input id="blah" type="checkbox" /><label for="blah">Label text</label>
    </div>
</form>

Answer 2

I usually leave a checkbox unlabeled and then make its "label" a separate element. It's a pain, but there's so much cross-browser difference between how checkboxes and their labels are displayed (as you've noticed) that this is the only way I can come close to controlling how everything looks.

I also end up doing this in winforms development, for the same reason. I think the fundamental problem with the checkbox control is that it is really two different controls: the box and the label. By using a checkbox, you're leaving it up to the implementers of the control to decide how those two elements are displayed next to each other (and they always get it wrong, where wrong = not what you want).

I really hope someone has a better answer to your question.

Answer 3

After over an hour of tweaking, testing, and trying different styles of markup, I think I may have a decent solution. The requirements for this particular project were:

1. Inputs must be on their own line
2. Checkbox inputs need to align vertically with the label text similarly (if not identically) across all browsers
3. If the label text wraps, it needs to be indented (so no wrapping down underneath the checkbox)

Before I get into any explanation, I'll just give you the code:

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>

<style type="text/css">
label {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
}
input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
    *overflow: hidden;
}
</style>

This code assumes that you're using a reset like Eric Meyer's that doesn't override form input margins and padding (hence putting margin and padding resets in the input CSS). Obviously in a live environment you'll probably be nesting/overriding stuff to support other input elements, but I wanted to keep things simple.

Things to note:

• The *overflow declaration is an inline IE hack (the star-property hack). Both IE 6 and 7 will notice it, but Safari and Firefox will properly ignore it. I think it might be valid CSS, but you're still better off with conditional comments; just used it for simplicity.
• As best I can tell, the only vertical-align statement that was consistent across browsers was vertical-align: bottom. Setting this and then relatively positioning upwards behaved almost identically in Safari, Firefox and IE with only a pixel or two of discrepancy.
• The major problem in working with alignment is that IE sticks a bunch of mysterious space around input elements. It isn't padding or margin, and it's damned persistent. Setting a width and height on the checkbox and then overflow: hidden for some reason cuts off the extra space and allows IE's positioning to act very similarly to Safari and Firefox.
• Depending on your text sizing, you'll no doubt need to adjust the relative positioning, width, height, and so forth to get things looking right.

Hope this helps someone else! I haven't tried this specific technique on any projects other than the one I was working on this morning, so definitely pipe up if you find something that works more consistently.

Answer 4

I've never had a problem with doing it like this:

<form>
  <div>
    <input type="checkbox" id="cb" /> <label for="cb">Label text</label>
  </div>
</form>

Answer 5

I usually use line height in order to adjust the vertical position of my static text:

<form>
   <div>
      <label><input type="checkbox" /> Label text</label>
   </div>
</form>

<style type="text/css">
label {
   line-height: 18px;
}
input {
   width: 13px;
   height: 18px;
   font-size: 12px;
   line-height: 12px;
}
</style>

Hope that helps.

Answer 6

Try my solution, I tried it in IE 6, FF2 and Chrome and it renders pixel by pixel in all the three browsers.

<style type="text/css">
*
{
    padding: 0px;
    margin: 0px;
}
#wb
{
    width: 15px;
    height: 15px;
    float: left;
}
#somelabel
{
    float: left;
    padding-left: 3px;
}
</style>

<div>
<input id="wb" type="checkbox" /><label for="wb" id="somelabel">Web Browser</label>
</div>

Answer 7

Sometimes vertical-align needs two inline (span, label, input, etc...) elements next to each other to work properly. The following checkboxes are properly vertically centered in IE, Safari, FF, and Chrome, even if the text size is very small or large.

They all float next to each other on the same line, but the nowrap means that the whole label text always stays next to the checkbox.

The downside is the extra meaningless SPAN tags.

<style type="text/css">
.checkboxes label
{
    display: block;
    float: left;
    padding-right: 10px;
    white-space: nowrap;
}

.checkboxes input
{
    vertical-align: middle;
}

.checkboxes label span
{
    vertical-align: middle;
}
</style>

<form>
    <div class="checkboxes">
        <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
        <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
        <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
    </div>
</form>

Now, if you had a very long label text that needed to wrap without wrapping under the checkbox, you'd use padding and negative text indent on the label elements:

.checkboxes label
{
    display: block;
    float: left;
    padding-right: 10px;
    padding-left: 22px;
    text-indent: -22px;
}

Answer 8

This works well for me:

fieldset{text-align:left;border:none}
  fieldset ol,fieldset ul{padding:0;list-style:none}
    fieldset li{padding-bottom:1.5em;float:none;clear:left}
      label{float:left;width:7em;margin-right:1em}
    fieldset.checkboxes li{clear:both;padding:.75em}  
      fieldset.checkboxes label{margin:0 0 0 1em;width:20em}
      fieldset.checkboxes input{float:left}

<form>

  <fieldset class="checkboxes">

    <ul>
      <li>
        <input type="checkbox" name="happy" value="yep" id="happy"/>
        <label for="happy">Happy?</label>
      </li>
      <li>
        <input type="checkbox" name="hungry" value="yep" id="hungry"/>
        <label for="hungry">Hungry?</label>
      </li>
    </ul>

  </fieldset>

</form>

Answer 9

Yay thanks! This too has been driving me nuts forever.

In my particular case, this worked for me:

input {
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: top;
position: relative;
*top: 1px;
*overflow: hidden;
}
label {
display: block;
padding: 0;
padding-left: 15px;
text-indent: -15px;
border: 0px solid;
margin-left: 5px;
vertical-align: top;
}

I am using the reset.css which might explain some of the differences, but this seems to work well for me.

Answer 10

working off of One Crayon's solution, I have something that works for me and is simpler:

  input[type=checkbox], input[type=radio] {
    vertical-align: middle;
    position: relative;
    bottom: 1px;
  }
  input[type=radio] {
    bottom: 2px;
  }

renders pixel-for-pixel the same in safari (whose baseline I trust) and both firefox and IE7 check out as good. it also works for various label font sizes, big and small. now, for fixing IE's baseline on selects and inputs.....

Answer 11

Just wanted to add to the discussion about the 'for' attribute on labels (slightly offtopic):

Please do supply it, even when it's not necessary, because it's so very convenient to use from javascript:

var label = ...
var input = document.getElementById(label.htmlFor);

That's a lot more convenient than trying to figure out wheter the label has the input nested, or wheter the input is before the label, or after.. etc. And it never hurts to supply it.. so.

Just my 2 cents.

Answer 12

Anyone got a reason why you can't just use vertical-align: -2px (or some other value) on the input?

Answer 13

With an input type checkbox wrapped inside the label and floated to the left like so:

<label for="id" class="checkbox">
  <input type="checkbox" id="id">
  <span>The Label</span>
</label>

this worked for me:

label.checkbox { display: block; }
.checkbox input { float: left; height: 18px; vertical-align: middle; }
.checkbox span { float: left; line-height: 18px; margin: 0 0 0 20px; }

Make sure the height of the is identical to the line-height of the (blocklevel) .

Answer 14

input {
  margin:0;
}

actually does the trick

Answer 15

One easy thing that seems to work well is to apply a adjust the vertical position of the checkbox with vertical-align. It will still be vary across browsers, but the solution is uncomplicated.

input { vertical-align: -2px }

Reference: http://www.cssdesignpatterns.com/Chapter%2012%20-%20ALIGNING%20CONTENT/Vertical-offset%20Content/example.html

Answer 16

vertical-align: middle (is not really the way to go)

simply adding: style="position:relative;top:2px;" to the input box would move it down 2px. so depending on your font size, you can move it along.

Answer 17

position: relative; has some issues in IE with z-index and animations like jQuery's slideUp/slideDown.

Css:

input[type=checkbox], input[type=radio] {
  vertical-align: baseline;
  position: relative;
  top: 3px;
  margin: 0 3px 0 0;
  padding: 0px;
}
input.ie7[type=checkbox], input.ie7[type=radio] {
  vertical-align: middle;
  position: static;
  margin-bottom: -2px;
  height: 13px;
  width: 13px;

}

jQuery:

$(document).ready(function() {
  if ($.browser.msie && $.browser.version <= 7) {
    $('input[type=checkbox]').addClass('ie7');
    $('input[type=radio]').addClass('ie7');
  }
});

The styling probably needs tweaks depending on the font-size used in <label>

PS: I use ie7js to make the css work in IE6.