current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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. I hope someone can help me.

share|improve this question
    
I don't think you can do that for option , you can do something like this for div elements though. –  freebird Nov 9 '12 at 10:12
2  
you cant do that without adding a background picture which is 50:50 –  Michael Nov 9 '12 at 10:13
add comment

2 Answers

up vote 1 down vote accepted

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

share|improve this answer
add comment
up vote 2 down vote

You can do this using SCSS. Here website teach you all though thing.
--otherwise
if you use different color for diff class means 

 OPTION.purple{ width: 100px; background-color: #1d5280; color: white;}
 OPTION.green{ width: 100px; background-color: #30843b; color: red;}

or u use same color means 

 OPTION.purple{ width: 100px; background-color: #1d5280;}
 OPTION.green{ width: 100px; background-color: #30843b;}
 option.green, option.purple {color: white;}

or

<style>
     OPTION.purple{ width: 100px; background-color: #1d5280; }
     OPTION.green{ width: 100px; background-color: #30843b;}
     option.add {color: white}
</style>
<select>
     <option>Choose color</option>
     <option class="purple add">Purle/Blue</option>
     <option class="green add">Brown/Green</option>
</select>
share|improve this answer
    
This is not what OP wants , he is asking one option two colors. –  freebird Nov 9 '12 at 10:08
    
Thank you for your answer but that's not exactly what I mean. I mean the background-color is 50/50 other colors. –  Marnix Nov 9 '12 at 10:09
    
Some thing edited for your reference. –  Selva Nov 9 '12 at 10:15
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.