1 /*

     2  * Form layout

     3  *

     4  * Inspiration taken from http://articles.sitepoint.com/article/fancy-form-design-css

     5  *      Since turned into a book? :)

     6  */

     7 

     8 /* General form errors, and field-specific error lists will display in red */

     9 form ul.errors,

    10 form ul.errors a

    11 {

    12     list-style-type: disc;

    13     color: #C00;

    14 

    15     margin: 0em 1em 1em;

    16 }

    17 

    18 fieldset

    19 {

    20     /* A fieldset will not be completely full-width, and will be vertically separated from adjacent fieldsets*/

    21     margin: 1em 20% 1em 1em;

    22 

    23     /* A fieldset shall not have any padding of its own, as we position the elements iniside it */

    24     padding: 0em;

    25 

    26     border: thin solid #aaa;

    27 }

    28 

    29 /* A fieldset's legend will look similar to a h2 element, except included as part of the frame */

    30 fieldset legend

    31 {

    32     width: 100%;

    33 

    34     font-size: large;

    35     font-weight: bold;

    36 

    37     margin: 0em 1em;

    38     padding: 0.5em;

    39 

    40     background-color: #e5e5e5;

    41 

    42     border: 1px dashed #c5c5c5;

    43 }

    44 

    45 /* A fieldset will be internally structured using a list, that is not itself visible */

    46 fieldset ul

    47 {

    48     list-style-type: none;

    49 

    50     margin: 0px;

    51     

    52     /* Recreate padding removed from fieldset */

    53     padding: 0em 1em;

    54 }

    55 

    56 /* Fields inside a fieldset will be vertically separated */

    57 fieldset ul > li

    58 {

    59     padding: 0.5em 1em;

    60 

    61     border-top: 1px solid #c5c5c5;

    62 }

    63 

    64 fieldset ul > li:first-child

    65 {

    66     border-top: none;

    67 }

    68 

    69 /* The field identifier displays above the field itself, and is visually weighted, but smaller than the fieldset legend */

    70 fieldset label,

    71 fieldset h3         /* used in place of labels for non-input fields... */

    72 {

    73     display: block;

    74 

    75     margin: 0.2em 0em;

    76     

    77     font-weight: bold;

    78     font-size: small;

    79 }

    80 

    81 /* A <strong> inside the label is an error message */

    82 fieldset label strong

    83 {

    84     color: #C00;

    85 

    86     text-transform: upppercase;

    87 }

    88 

    89 /* The field element are consistently aligned */

    90 form input,

    91 form textarea

    92 {

    93     width: 40%;

    94 

    95     border: thin solid #444;

    96     padding: 4px;

    97 }

    98 

    99 /* A multi-line text edit widget is wide enough for lots of text */

   100 form textarea

   101 {

   102     width: 80%;

   103 }

   104 

   105 /* A field that failed validation is highlighted */

   106 form .failed input,

   107 form .failed textarea

   108 {

   109     border: thin solid red;

   110 }

   111 

   112 form select,

   113 form input[type=submit]

   114 {

   115     width: 30%;

   116 

   117     border: auto;

   118 }

   119 

   120 form input[type=reset]

   121 {

   122     width: auto;

   123 

   124     font-size: x-small;

   125 

   126     float: right;

   127 }

   128 

   129 /* Field's descriptive text */

   130 fieldset p

   131 {

   132     margin: 0.8em;

   133 

   134     font-style: italic;

   135     font-size: x-small;

   136 }

   137 

   138 /* Static fields */

   139 fieldset div.value

   140 {

   141     /* Value is visually indented */

   142     margin-left: 2em;

   143 }

   144