• home
  • forum
  • my
  • kt
  • download
  • Style your forms with CSS

    Author: 2008-08-30 15:49:57 From:

    Here is one simple method for styling valid XHTML form with CSS without using additional divs or paragraphs. The code is tested and works on Mozilla 2.x, Opera 9.x and Internet Explorer 7. Try it!
    Preview:
    css styled form

    The CSS part:

    <style>
    fieldset label{
    cursor:pointer;
    display:inline;
    width:90px !important;
    line-height:16px;
    text-align:right;
    }

    input,textarea{
    border-width:2px 1px 1px 2px;
    font-size: 1em; font-weight:bold;
    overflow:auto;
    margin-left:5px;
    }
    </style>


    The XHTML part:
    <form>
    <fieldset>
    <legend>Login: </legend>
    <label for="Login">Username: </label>
    <input id="Login" name="login" maxlength="8" size="8" type="text" /> <br/>
    <label for="Password">Password: </label>
    <input id="Password" name="password" maxlength="8" size="8" type="password" /> <br/>
    <input name="Submit" value="Submit" type="submit" />
    </fieldset>
    </form>

    discuss this topic to forum

    relation tutorial

    No relevant information

    Category

      Accessibility (7)
      Basics (7)
      Content (8)
      eCommerce (9)
      Miscellaneous (7)
      Site Optimization (11)
      Templates (7)

    New

    Hot