Help styling forms

[marcoman]

I used ‘search’ to find tips on styling forms. I found one but the article only gives tips on styling fields connected to label tags with the for attribute. I often use labels wrapped around input fields.

Can anyone point me to another resource for styling

Code:

……

using css?

[apostrophe]

Don’t know where you are searching. I just typed "styling forms with css" into google and got 45000 results.
Here’s a nice one http://www.sitepoint.com/article/fancy-form-design-css/

[marcoman]

I used the search form in this site =). Thanks for the reply let me check out that link.

[marcoman]

The link above didn’t work. Still can’t find the answer to my question. To clarify. If I have this markup:

Code:

Username
Password

How can I align them using css? I’ve read an article in css-tricks (I can’t find it now) showing how to do it. But it only applies to labels with the for attribute. It involves giving the labels a static width, floating them to the left and text-aligning them to the right. These instructions doesn’t work for this mark up. Suggestions css experts?

[AshtonSanders]

I would start with putting the inputs outside the label: http://www.w3schools.com/tags/tag_label.asp
(Since the input is not the label.)
Then I would give labels a fixed width, like this:

CSS:

Code:

label {width:100px;}

HTML:

Code:

Username
Password
…

Is that what you’re looking for?

[nickstr]

how do you want to align them, vertically, horizontally ?
try to put one label and one input in a fieldset and the next 2 ones in another fieldset, give the labels line-height the same as the input height

[Author]

Posts