I just spent some time styling a complex(?) web form with CSS. Some basic requirements:
- Any number of input elements on each form line
- The first label on each line to be a fixed width – like a column
- Able to indicate required/optional/readonly fields
- Able to move things around fairly easily – particularly after a few months of not touching the code (and in my opinion counting td/tr and cell spanning is not easy)
Steps to achieve this result:
- First enclose each form line with a div (class=row).
- Add an indicator to the first label element on each row (class=first).
- Enclose the relevant pairs – label and input/select/etc – with a span (class=optional/readonly/required).
- Add CSS to suit the requirements.
So, it took a bit longer than it should have…
The label element does not have a width property unless you float it.
When floating the ‘first’ label, the text changed vertical alignment relative to the other labels in the line. I could fix it by applying a margin to the ‘first’ label, but when I changed font-size (or the text size via the browser) the alignment was out again.
The problem seemed to be caused by floating the label for for a font-size smaller than height of the input box. The simple fix seems to be in adding a line-height to all labels.by