Blogs about accessibility:
A CSS Styled Form.
7.18.2007
Why can't clients just tell me when they go live?!? Are the fifty billion little bullet points that ask them to do so not enough? Gah! Idiots.
Now that I've got that out of my system, I feel it's time I shared some more code with you. I present, the CSS-styled form!
This example is taken from Web Design in a Nutshell, 3rd Edition.
Here's the CSS that gets it done.
<style type="text/css">
body
{ font-family: Arial, Verdana, Helvetica, sans-serif; }
form
{ border: solid #FFFFFF 1px;
width: 28em;
margin: 5px;
padding: 5px;
}
label
{ width: 6em;
float: left;
text-align: right;
margin: .5em 1em;
clear: both;
}
input, textarea
{ font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: small;
margin: .5em 0;
width: 17em;
}
input[type="submit"]
{ float: none;
clear: both;
width: auto;
margin-bottom: 1em;
margin-left: 8em;
}
br { clear: both; }
</style>
Notes:
- The user-interactive fields (input and textarea) do not inherit font properties from the body. This is why I've all the font specifications in the input & textarea section of the style-sheet.
- The magic here is that while the label elements are floated left and have their width fixed at 6em; the text inside them is aligned right. This keeps all the text lined up on the right side. The input and textbox elements are then pushed away from the
- That fancy stuff on the selector for the submit button is the attribute selector. It selects any input elements with an attribute of type set to submit. It's very handy for separating the buttons from checkboxes and radio buttons.
- At one time I desired a method to override the Google Toolbar's auto-fill occaisonal highlighting of form fields. Something along the lines of Disabling IE's Image Resizing would be lovely. However Chris Heilmann made the excellent point that your user chose to see the yellow highlighting by installing the Google Toolbar. But part of accessible and flexible design is allowing a user to interact with your site on their terms.