156 lines
4.6 KiB
HTML
156 lines
4.6 KiB
HTML
<style>
|
|
div.container { float: left; background-color: #eee; padding: 4px; margin: 4px; }
|
|
div.swatch { width: 14px; height: 14px; background-color: white; position: relative; }
|
|
div.swatch div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
|
|
select { display: block; margin-left: 14px; margin-bottom: 1px; }
|
|
|
|
div.container.white > select,
|
|
div.container.white > div.swatch > div
|
|
{ background-color: white; }
|
|
|
|
div.container.black > select,
|
|
div.container.black > div.swatch > div
|
|
{ background-color: black; }
|
|
|
|
div.container.initial > select,
|
|
div.container.initial > div.swatch > div
|
|
{ background-color: initial; }
|
|
|
|
div.container.semiblue > select,
|
|
div.container.semiblue > div.swatch > div
|
|
{ background-color: rgba(0, 0, 255, 0.5); }
|
|
|
|
.solid { background-color: red; }
|
|
.reddish { background-color: rgba(255, 0, 0, 0.75); }
|
|
.semigreen { background-color: rgba(0, 255, 0, 0.5); }
|
|
.darken { background-color: rgba(0, 0, 0, 0.67); }
|
|
</style>
|
|
<p>
|
|
<strong>This test is for Windows only.</strong>
|
|
When you pull down each menu, the items’ background colors should match up with the swatches on the left (except for the hovered item).
|
|
</p>
|
|
<div class="container white">
|
|
Solid white menu:
|
|
<select>
|
|
<option>Default (transparent) option</option>
|
|
<option class="solid">Solid red option</option>
|
|
<option class="reddish">25% transparent red option</option>
|
|
<option class="semigreen">50% transparent green option</option>
|
|
<option class="darken">33% transparent black option</option>
|
|
</select>
|
|
<div class="swatch"></div>
|
|
<div class="swatch">
|
|
<div>
|
|
<div class="solid"></div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div>
|
|
<div class="reddish"></div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div>
|
|
<div class="semigreen"></div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div>
|
|
<div class="darken"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container black">
|
|
Solid black menu:
|
|
<select>
|
|
<option>Default (transparent) option</option>
|
|
<option class="solid">Solid red option</option>
|
|
<option class="reddish">25% transparent red option</option>
|
|
<option class="semigreen">50% transparent green option</option>
|
|
<option class="darken">33% transparent black option</option>
|
|
</select>
|
|
<div class="swatch"></div>
|
|
<div class="swatch">
|
|
<div>
|
|
<div class="solid"></div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div>
|
|
<div class="reddish"></div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div>
|
|
<div class="semigreen"></div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div>
|
|
<div class="darken"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container initial">
|
|
Transparent menu:
|
|
<select>
|
|
<option>Default (transparent) option</option>
|
|
<option class="solid">Solid red option</option>
|
|
<option class="reddish">25% transparent red option</option>
|
|
<option class="semigreen">50% transparent green option</option>
|
|
<option class="darken">33% transparent black option</option>
|
|
</select>
|
|
<div class="swatch"></div>
|
|
<div class="swatch">
|
|
<div>
|
|
<div class="solid"></div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div>
|
|
<div class="reddish"></div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div>
|
|
<div class="semigreen"></div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div>
|
|
<div class="darken"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container semiblue">
|
|
50% blue menu:
|
|
<select>
|
|
<option>Default (transparent) option</option>
|
|
<option class="solid">Solid red option</option>
|
|
<option class="reddish">25% transparent red option</option>
|
|
<option class="semigreen">50% transparent green option</option>
|
|
<option class="darken">33% transparent black option</option>
|
|
</select>
|
|
<div class="swatch"></div>
|
|
<div class="swatch">
|
|
<div>
|
|
<div class="solid"></div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div>
|
|
<div class="reddish"></div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div>
|
|
<div class="semigreen"></div>
|
|
</div>
|
|
</div>
|
|
<div class="swatch">
|
|
<div>
|
|
<div class="darken"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|