|
1 <style> |
|
2 div.container { float: left; background-color: #eee; padding: 4px; margin: 4px; } |
|
3 div.swatch { width: 14px; height: 14px; background-color: white; position: relative; } |
|
4 div.swatch div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } |
|
5 select { display: block; margin-left: 14px; margin-bottom: 1px; } |
|
6 |
|
7 div.container.white > select, |
|
8 div.container.white > div.swatch > div |
|
9 { background-color: white; } |
|
10 |
|
11 div.container.black > select, |
|
12 div.container.black > div.swatch > div |
|
13 { background-color: black; } |
|
14 |
|
15 div.container.initial > select, |
|
16 div.container.initial > div.swatch > div |
|
17 { background-color: initial; } |
|
18 |
|
19 div.container.semiblue > select, |
|
20 div.container.semiblue > div.swatch > div |
|
21 { background-color: rgba(0, 0, 255, 0.5); } |
|
22 |
|
23 .solid { background-color: red; } |
|
24 .reddish { background-color: rgba(255, 0, 0, 0.75); } |
|
25 .semigreen { background-color: rgba(0, 255, 0, 0.5); } |
|
26 .darken { background-color: rgba(0, 0, 0, 0.67); } |
|
27 </style> |
|
28 <p> |
|
29 <strong>This test is for Windows only.</strong> |
|
30 When you pull down each menu, the items’ background colors should match up with the swatches on the left (except for the hovered item). |
|
31 </p> |
|
32 <div class="container white"> |
|
33 Solid white menu: |
|
34 <select> |
|
35 <option>Default (transparent) option</option> |
|
36 <option class="solid">Solid red option</option> |
|
37 <option class="reddish">25% transparent red option</option> |
|
38 <option class="semigreen">50% transparent green option</option> |
|
39 <option class="darken">33% transparent black option</option> |
|
40 </select> |
|
41 <div class="swatch"></div> |
|
42 <div class="swatch"> |
|
43 <div> |
|
44 <div class="solid"></div> |
|
45 </div> |
|
46 </div> |
|
47 <div class="swatch"> |
|
48 <div> |
|
49 <div class="reddish"></div> |
|
50 </div> |
|
51 </div> |
|
52 <div class="swatch"> |
|
53 <div> |
|
54 <div class="semigreen"></div> |
|
55 </div> |
|
56 </div> |
|
57 <div class="swatch"> |
|
58 <div> |
|
59 <div class="darken"></div> |
|
60 </div> |
|
61 </div> |
|
62 </div> |
|
63 <div class="container black"> |
|
64 Solid black menu: |
|
65 <select> |
|
66 <option>Default (transparent) option</option> |
|
67 <option class="solid">Solid red option</option> |
|
68 <option class="reddish">25% transparent red option</option> |
|
69 <option class="semigreen">50% transparent green option</option> |
|
70 <option class="darken">33% transparent black option</option> |
|
71 </select> |
|
72 <div class="swatch"></div> |
|
73 <div class="swatch"> |
|
74 <div> |
|
75 <div class="solid"></div> |
|
76 </div> |
|
77 </div> |
|
78 <div class="swatch"> |
|
79 <div> |
|
80 <div class="reddish"></div> |
|
81 </div> |
|
82 </div> |
|
83 <div class="swatch"> |
|
84 <div> |
|
85 <div class="semigreen"></div> |
|
86 </div> |
|
87 </div> |
|
88 <div class="swatch"> |
|
89 <div> |
|
90 <div class="darken"></div> |
|
91 </div> |
|
92 </div> |
|
93 </div> |
|
94 <div class="container initial"> |
|
95 Transparent menu: |
|
96 <select> |
|
97 <option>Default (transparent) option</option> |
|
98 <option class="solid">Solid red option</option> |
|
99 <option class="reddish">25% transparent red option</option> |
|
100 <option class="semigreen">50% transparent green option</option> |
|
101 <option class="darken">33% transparent black option</option> |
|
102 </select> |
|
103 <div class="swatch"></div> |
|
104 <div class="swatch"> |
|
105 <div> |
|
106 <div class="solid"></div> |
|
107 </div> |
|
108 </div> |
|
109 <div class="swatch"> |
|
110 <div> |
|
111 <div class="reddish"></div> |
|
112 </div> |
|
113 </div> |
|
114 <div class="swatch"> |
|
115 <div> |
|
116 <div class="semigreen"></div> |
|
117 </div> |
|
118 </div> |
|
119 <div class="swatch"> |
|
120 <div> |
|
121 <div class="darken"></div> |
|
122 </div> |
|
123 </div> |
|
124 </div> |
|
125 <div class="container semiblue"> |
|
126 50% blue menu: |
|
127 <select> |
|
128 <option>Default (transparent) option</option> |
|
129 <option class="solid">Solid red option</option> |
|
130 <option class="reddish">25% transparent red option</option> |
|
131 <option class="semigreen">50% transparent green option</option> |
|
132 <option class="darken">33% transparent black option</option> |
|
133 </select> |
|
134 <div class="swatch"></div> |
|
135 <div class="swatch"> |
|
136 <div> |
|
137 <div class="solid"></div> |
|
138 </div> |
|
139 </div> |
|
140 <div class="swatch"> |
|
141 <div> |
|
142 <div class="reddish"></div> |
|
143 </div> |
|
144 </div> |
|
145 <div class="swatch"> |
|
146 <div> |
|
147 <div class="semigreen"></div> |
|
148 </div> |
|
149 </div> |
|
150 <div class="swatch"> |
|
151 <div> |
|
152 <div class="darken"></div> |
|
153 </div> |
|
154 </div> |
|
155 </div> |