CSS Blog and Knowledge Base
Why not to use display:none when styling checkboxes and form elements
Tags:
When styling HTML form elements with CSS, it's very important to make sure that your styling changes don't negatively affect the usability or functionality of your form as a whole. Being that we have to find creative ways to style some form elements, it follows that we'll also have to find creative ways to preserve form and form element functionality within the user's web browser.
As you may be aware, CSS Checkbox styles form elements by hiding the actual form control and subsequently styling that control's associated LABEL element. You can read more about styling checkboxes with CSS if you want to.
Knowing that this is the appropriate strategy, the CSS-smith's go-to move would be to hide the checkbox, or other form element, by assigning "display:none" to that element's CSS specification. Usually this is a quick and easy way to hide HTML elements that need to exist in the background.
However, using "display:none" to hide form elements in order to style the other elements around them raises issues for the usability of the form in general:
For one, you lose the ability to use the TAB key to tab throughout the form fields and elements because the browser will ignore the element with the property "display:none" even though you've maybe styled it's associated LABEL or other HTML element to create a visually appealing feel to your form control.
Another big drawback to using "display:none" for this purpose is that Screen Readers and other technologies used to help interpret websites for disabled users will also ignore the Form control if it has the CSS property "display:none". This basically will make your form unusable to some with physical disabilities which is obviously no good.
What we do now to combat these drawback is use a series of CSS specifications to replace "display:none" on our Checkbox and Radio controls in order to hide the actual control, style that control's LABEL element and preserve all browser and form functionality. These controls were adapted from classes contained within the popular HTML5 Boilerplate HTML template. Check out the following screenshot:
Here's the text for you to copy and paste if you prefer:
position:absolute; z-index:-1000; top:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
What these styles essentially do is replace the "display:none" effect by using a combination of CSS sizing and positioning of the HTML form element. Thus you do not lose form / checkbox functionality AND you're still able to style.
