Forms formatting using CSS

Example: Format an HTML table to look like a form:

<html>
<head>
    <style type="text/css">
        #WbsBody {
            background-color: #ADC3EF;
        }
 
        #WbsPanel {
            background-color: #EEF0F6;
            padding: 5px;
            margin: 15px;
            border: 1px solid #638AD6;
        }
 
        #WbsForm {
            padding: 2px;
        }
 
        #WbsForm span, #WbsForm td, #WbsForm input, #WbsForm select, #WbsForm textarea {
            font-family: Tahoma;
            font-size: 8pt;
            color: #000000;
        }
 
        #WbsForm input[type=text], select {
            height: 17px;
            border: 1px solid #7b9ebd;
            padding-left: 1px;
            cursor: default;
            width: 170px;
        }
 
        #WbsForm textarea {
            border: 1px solid #7b9ebd;
            padding-left: 1px;
            cursor: default;
            width: 350px;
        }
 
        #WbsForm div.description {
            border: 1px solid #7b9ebd;
            padding: 3px;
            width: 350px;
        }
 
        #WbsForm select {
            height: 21px;
            border: 1px solid #7b9ebd;
            padding-left: 1px;
            cursor: default;
            width: 174px;
        }
 
        #WbsForm td {
            padding-left: 10px;
        }
 
        #WbsForm tr {
            height: 20px;
        }
 
        #WbsForm td.required {
            font-weight: bold;
            color: #9F2409;
        }
 
        #WbsButtons input[type=submit], input[type=button] {
            font-size: 8pt;
            border: 1px solid #7B9EBD;
            background-color: #FAFAFC;
            width: 100px;
            margin-left: 3px;
            margin-right: 3px;
            margin-bottom: 3px;
        }
 
        #WbsButtons td {
            font-family: Tahoma;
            font-size: 8pt;
            color: #000000;
        }
 
        a.ReportLink {
            color: Blue;
            padding: 5px;
        }
 
        a.ReportLink:hover {
            color: crimson;
            padding: 5px;
        }
 
        table.formTitle {
            width: 100%;
            height: 32px;
            background-color: #63769B;
            border-bottom: solid 1px #485673;
            table-layout: fixed;
        }
 
        td.formTitle {
            text-align: left;
            color: #ffffff;
            font-family: Tahoma;
            font-size: 14px;
            font-weight: bold;
            text-indent: 10px;
            padding-right: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
 
</head>
    <body id="WbsBody">
 
        <table class="formTitle" cellpadding="1" cellspacing="0">
            <tr>
                <td class="formTitle" nowrap="nowrap">WBS Form Demo</td>
            </tr>
        </table>
 
        <div id="WbsPanel">
            <table id="WbsForm">
                <tr>
                    <td class="required">Record ID</td>
                    <td><input type="text" value="123" /></td>
                </tr>
                <tr>
                    <td>Colors</td>
                    <td>
                        <select id="ddlColors">
                            <option value="white" selected="selected">White</option>
                            <option value="red">Red</option>
                            <option value="green">Green</option>
                            <option value="blue">Blue</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Notes</td>
                    <td><textarea cols="40" rows="4">Some notes here...</textarea></td>
                </tr>
                <tr>
                    <td></td>
                    <td><div class="description" />A long description goes here...</td>
                </tr>
 
                <tr>
                    <td></td>
                    <td>
                        <a href="#" class="ReportLink">Download Report</a>
                    </td>
                </tr>
            </table>
 
            <br />
 
            <table id="WbsButtons" width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td align="left">
                        <input id="btnSubmit" type="submit" value="Submit" />
                        <input id="btnCancel" type="button" value="Cancel" />
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

Example: Format a DIV element to look like a text box:

<div style="border: 1px inset; padding: 3px;">Some text</div>

Example: Make an HR line dotted:

hr {
    color: #5EC054;
    border-style: dotted;
    width: 95%
}

Example: Cut off text and add ellipsis:

<html>
    <head>
        <style type="text/css">
            * { font-family: Verdana; }
 
            .box {
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                width: 300px;
                border: 1px dashed #333;
                padding: 10px;
                margin: 0 20px;
            }
        </style>
    </head>
 
    <body>
        <div class="box">Lorem ipsum dolor sit amet, per at vidisse detraxit constituam, 
          brute dicat partiendo qui at. Et est eirmod corpora. Mea ea velit integre repudiare.</div>     
    </body>
</html>

Wisenheimer Brainstorm Wiki

User Tools

Site Tools

Forms formatting using CSS

Page Tools