Question

In my PHP system people can choose a color combination. I’m doing this with a option select list like this:

<style>
     OPTION.purple{ width: 100px; background-color: #1d5280; color:white}
     OPTION.green{ width: 100px; background-color: #30843b; color:white}
</style>
<select>
     <option>Choose color</option>
     <option class="purple">Purle/Blue</option>
     <option class="green">Brown/Green</option>
</select>

Now each option has 1 color, is it possible to give 1 option 2 colors. So the first half of the option has 1 color, and the other half of the option has another color.

Answer 1

With pure CSS without images, I think you can’t do it. I recommand you using images.

LIVE DEMO

I use linear gradient in this demo (note: change -webkit-linear-gradient with -moz-linear-gradient if you are using FF or with -o-linear-gradient if you are using Opera). It works for div element, but it can’t be applied to option background (see demo).