Windows 10 will reach EOS (end of support) on October 14, 2025. For more information, see this article.

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

Firefox does not render CSS-styled checkboxes the correct width/height.

  • 1 reply
  • 38 have this problem
  • 4 views
  • Last reply by cor-el

rainman797
rainman797
more options

I'm trying to create a page that renders the checkboxes slightly larger than the browser default. It's important because I'm creating a quiz for young kids (5-7 years old), and ensuring a large click area and that they know where to click can have an effect on their score.

I've poked about on the web and found the http://www.456bereastreet.com/lab/styling-form-controls-revisited/checkbox/ site that shows how different browsers render CSS styles for checkboxes. Firefox seems to ignore CSS related to this completely. Is this a bug, an oversight, or a deliberate decision? If the latter, I'm curious as to why.

Thanks for the help!

I'm trying to create a page that renders the checkboxes slightly larger than the browser default. It's important because I'm creating a quiz for young kids (5-7 years old), and ensuring a large click area and that they know where to click can have an effect on their score. I've poked about on the web and found the http://www.456bereastreet.com/lab/styling-form-controls-revisited/checkbox/ site that shows how different browsers render CSS styles for checkboxes. Firefox seems to ignore CSS related to this completely. Is this a bug, an oversight, or a deliberate decision? If the latter, I'm curious as to why. Thanks for the help!

Modified by rainman797

All Replies (1)

cor-el
cor-el
  • Moderator
more options

Try to add -moz-appearance: none; to the style of the checkboxes. 

input[type="checkbox"] {-moz-appearance: none;}