Source code in Qf2Style.css

To see how this is used return to this tutorial index.

/* CSS to use with QuickForm2 so that it looks similar to what
 * you get from the original QuickForm.
 * Copyright (c) 2009, Parliament Hill Computers (www.phcomp.co.uk). Author: Alain D D Williams (addw@phcomp.co.uk).
 * You may used this file as the basis your own (or organisation's/company's) project (under whatever
 * licence that you see fit), but may not claim ownership or copyright of the substantially unmodified file.
 * This file is made available in the hope that it is useful, there is no warranty at all, use at your own risk.
 *
 * SCCS: @(#)Qf2Style.css	1.3 11/20/09 16:58:28
 */

span.required {
    /* Required asterisks (next to label) in red */
    color:#ff0000;
}
div.reqnote {
    /* Make the required note line up with input lables */
    display:block; float:left; clear:both; text-align:right; width:30%;
    font-size:80%;
}
div.reqnote em {
    /* Asterisk on required not to be in red */
    color:#ff0000;
}
div.row {
    /* Make input fields start on a new line */
    clear: both;
}
div.error {
    color:red;
}
label.element {
    display:block; text-align:right; float:left; width:30%; padding-right:2%;
}
fieldset {
    clear: both;
}
.element input {
    display:block; float:left; color:#0000ff;
}
input[type="submit"], input[type="reset"], button {
    /* Submit, reset input fields and button tag */
    width:10em;    /* Without this the button is as wide as the text in it needs */

    /* The margin-left is because the label part for the buttons is empty
     * so that the buttons are positioned at the very left of the page.
     * You can avoid this by putting something there, eg:
     *     $form->addElement('reset', 'Clear')->setLabel(' ')
     */
    margin-left:32%;
}
.notes {
    clear:both;
    padding-top:10px;
}
br + input, br + select {
    /* An error message is after the label, so insert some indent
     * on the input so that it lines up with the others.
     */
    margin-left:32%;
}


Return to this tutorial index.