Dual color option in select box

Question

As you can see on the image I have 7 options in select box. Is it possible to make 2 divs inside one <option> or gradient background. I need to get 2 colors in one <option>.

<td class="footable-visible"  style="width:1px; ">
        <div class="container" style="width:130px;">                                            
            <div class="row">
                 <select id="mySelect"  class="form-control">
                    <option style="color:white;background-color:#72D527;"> </option>
                    <option style="color:white;background-color:#4DB6AC;"> </option>
                    <option style="color:white;background-color:#CE93D8;"> </option>
                    <option style="color:white;background-color:#FFAB91;"> </option>
                    <option style="color:white;background-color:#F9A825;"> </option>
                    <option style="color:white;background-color:#BCAAA4;"> </option>
                    <option style="color:white;background-color:#9E9E9E;"> </option>
                 </select> 
            </div>
        </div>
</td>

http://jsfiddle.net/9c6oca5q/

EDIT: Gradient is working in Firefox but not in Chrome

1. Firefox                2. Chrome

score 2 · Answer 1 · answered Oct 27 '15 at 12:40

2

You need a gradient for that:

.test{
    background-image: linear-gradient(blue 50%, green 50%);
}

DEMO

answered Oct 27 '15 at 12:40

lmgonzalves

6,518
3
22
41

strange it is working on Firefox but not in Chrome... that is what I have done before by my self but it is only white in Chrome. – spaceholder Oct 27 '15 at 12:43
1

Mmm, It should work, beacuse [prefixes are not needed](http://shouldiprefix.com/#gradients) for Fx 10+, Op 11.6+, Ch 26+, IE 10. – lmgonzalves Oct 27 '15 at 12:50
I just checked and I have latest Chrome. Other gradients are working but not in select box. Will play around. Maybe I will find the solution. – spaceholder Oct 27 '15 at 12:52
1

Are you tried [this](http://stackoverflow.com/questions/2226666/background-image-for-select-dropdown-does-not-work-in-chrome/5972981#5972981)? Seems to be that Chrome does not allow this kind of styles :( – lmgonzalves Oct 27 '15 at 13:12
1

Looks like I will have to have two select boxes. Thank you anyways man ! – spaceholder Oct 27 '15 at 13:17

score 1 · Answer 2 · answered Oct 27 '15 at 12:40

This is your code:

<td class="footable-visible"  style="width:1px; ">
    <div class="container"  style="width:130px;">                                            
        <div class="row">
             <select id="mySelect"  class="form-control">
                <option style="color:white; background: -webkit-linear-gradient(#72D527, #C7EDC6); background: -o-linear-gradient(#72D527, #C7EDC6); background: -moz-linear-gradient(#72D527, #C7EDC6); background: linear-gradient(#72D527, #C7EDC6); "> </option>
                <option style="color:white;background-color:#4DB6AC;"> </option>
                <option style="color:white;background-color:#CE93D8;"> </option>
                <option style="color:white;background-color:#FFAB91;"> </option>
                <option style="color:white;background-color:#F9A825;"> </option>
                <option style="color:white;background-color:#BCAAA4;"> </option>
                <option style="color:white;background-color:#9E9E9E;"> </option>
             </select> 
        </div>
    </div>

strange it is working on Firefox but not in Chrome... that is what I have done before by my self but it is only white in Chrome. — spaceholder, Oct 27 '15 at 12:43

Dual color option in select box

2 Answers2