The width / height of the flag does not change for new browsers

Question

I am working on a site that must comply with the requirements of section 508, so I decided that increasing the size of the flags would be useful for anyone with a low vision who still has some kind of vision. Check out this screenshot from Chrome 15 (vs Chrome 16):

This is the same css that happens:

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

As you can see, width and height are interpreted in very different ways. Does anyone know how to make this work with both browsers? (IE9 does the same on the right).

Answer 1

In fact, there is no cross-browser solution (this is an old article, but still good and relevant) using the actual checkbox. There are tricks you can use in CSS3. The one I use is not very browser friendly (a newer browser is required), but there are other ways that are a bit more friendly to each other, but not 100%. I doubt that you will find anything that supports IE6, for example.

Something like that:

 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> 

This is a very simple example. See jsFiddle.