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