Checkbox width/height not changing for newer browsers

Question

I'm working on a site that needs to be Section 508 compliant so I figured increasing the size of the checkboxes would be useful to any of the visually impaired that still had some vision. Check out this screen shot from Chrome 15 (versus Chrome 16):

This is the same css which happens to be:

input[type="checkbox"] {
  width: 30px;
  height: 30px;
}

As you can see the width and height are interpreted very differently. Anyone know how to get this to work with both browsers? (IE9 does the same thing on the right also).

Answer 1

There really isn't any cross browser solution (that's an old article, but still good and relevant) using an actual checkbox. There are tricks you can use in CSS3. The one I use isn't very browser friendly (requires a newer browser), but there are other ways that are a little more cross-browser friendly, still not 100% though. I doubt you'll find anything that will support IE6, for example.

Something like this:

input.checkbox { display: none }
input.checkbox + label > span.checkbox-span { display: inline-block; color: #FFF; border: 1px solid #000; width: 30px; line-height: 30px; font-size: 24px; text-align: center }
input.checkbox:checked + label > span.checkbox-span { color: #000 }

<input type="checkbox" class="checkbox" id="check_1" />
<label for="check_1"><span class="checkbox-span">✓</span> Text describing checkbox #1</label>

That's a very basic example. See the jsFiddle.