form-css
1
2 * {
3 margin: 0;
4 padding: 0;
5 box-sizing: border-box;
6 }
7
8 body {
9 font-family: system-ui, -apple-system, sans-serif;
10 background: #f5f5f5;
11 padding: 20px;
12 line-height: 1.6;
13 }
14
15 .container {
16 max-width: 700px;
17 margin: 0 auto;
18 background: white;
19 padding: 40px;
20 border-radius: 8px;
21 box-shadow: 0 2px 10px rgba(0,0,0,0.1);
22 }
23
24 h1 {
25 margin-bottom: 10px;
26 color: #333;
27 }
28
29 .subtitle {
30 color: #666;
31 margin-bottom: 30px;
32 font-size: 14px;
33 }
34
35 .question {
36 margin-bottom: 30px;
37 }
38
39 .question-number {
40 color: #888;
41 font-size: 14px;
42 margin-bottom: 5px;
43 }
44
45 label {
46 display: block;
47 margin-bottom: 10px;
48 color: #333;
49 font-weight: 500;
50 }
51
52 input[type="radio"] {
53 margin-right: 8px;
54 }
55
56 .radio-option {
57 margin-bottom: 8px;
58 }
59
60 textarea {
61 width: 100%;
62 padding: 12px;
63 border: 1px solid #ddd;
64 border-radius: 4px;
65 font-family: inherit;
66 font-size: 14px;
67 resize: vertical;
68 min-height: 100px;
69 }
70
71 textarea:focus {
72 outline: none;
73 border-color: #666;
74 }
75
76 select {
77 width: 100%;
78 padding: 10px;
79 border: 1px solid #ddd;
80 border-radius: 4px;
81 font-family: inherit;
82 font-size: 14px;
83 background: white;
84 }
85
86 select:focus {
87 outline: none;
88 border-color: #666;
89 }
90
91 button {
92 width: 100%;
93 padding: 15px;
94 background: #333;
95 color: white;
96 border: none;
97 border-radius: 4px;
98 font-size: 16px;
99 cursor: pointer;
100 margin-top: 20px;
101 }
102
103 button:hover {
104 background: #555;
105 }
106
107 .warning {
108 background: #fff3cd;
109 padding: 15px;
110 border-radius: 4px;
111 margin-bottom: 30px;
112 border-left: 4px solid #ffc107;
113 font-size: 14px;
114 }
115
116 .required {
117 color: #d32f2f;
118 }
119