Grow your CSS skills. Land your dream job.

Help styling forms

  • # May 23, 2009 at 8:56 am

    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?

    # May 23, 2009 at 9:03 am

    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/

    # May 23, 2009 at 9:07 am

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

    # May 24, 2009 at 7:35 pm

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

    Code:


    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?

    # May 24, 2009 at 9:53 pm

    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:


    Is that what you’re looking for?

    # May 25, 2009 at 9:34 am

    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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".