|
1 /* -------------------------------------------------------------- |
|
2 |
|
3 forms.css |
|
4 * Sets up some default styling for forms |
|
5 * Gives you classes to enhance your forms |
|
6 |
|
7 Usage: |
|
8 * For text fields, use class .title or .text |
|
9 |
|
10 |
|
11 -------------------------------------------------------------- */ |
|
12 |
|
13 label { font-weight: bold; } |
|
14 |
|
15 |
|
16 /* Fieldsets */ |
|
17 fieldset { padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; } |
|
18 legend { font-weight: bold; font-size:1.2em; } |
|
19 |
|
20 /* Text fields */ |
|
21 input.text, input.title { width: 300px; margin:0.5em 0.5em 0.5em 0; } |
|
22 input.text, input.title { border:1px solid #bbb; background:#f6f6f6; padding:5px; } |
|
23 input.text:focus, |
|
24 input.title:focus { border:1px solid #999; background:#fff; } |
|
25 input.title { font-size:1.5em; } |
|
26 |
|
27 /* Textareas */ |
|
28 textarea { width: 400px; height: 250px; margin:0.5em 0.5em 0.5em 0; } |
|
29 textarea { border:1px solid #bbb; background:#eee; padding:5px; } |
|
30 textarea:focus { border:1px solid #999; background:#fff; } |
|
31 |
|
32 /* Select fields */ |
|
33 select { border:1px solid #ccc; background:#f6f6f6; width:200px; } |
|
34 select:focus { border:1px solid #999; background:#fff; } |
|
35 |
|
36 |
|
37 /* Success, error & notice boxes for messages and errors. */ |
|
38 .error, |
|
39 .notice, |
|
40 .success { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; } |
|
41 .error { background: #FBE3E4; color: #D12F19; border-color: #FBC2C4; } |
|
42 .notice { background: #FFF6BF; color: #817134; border-color: #FFD324; } |
|
43 .success { background: #E6EFC2; color: #529214; border-color: #C6D880; } |
|
44 .error a { color: #D12F19; } |
|
45 .notice a { color: #817134; } |
|
46 .success a { color: #529214; } |