<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>