javascript - 选择框中的双色选项

如图所示，我在选择框中有7个选项。是否可以在一个<option>或渐变背景中进行2个div。我需要一个<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/
编辑：渐变在Firefox中工作，但在Chrome中不工作

1. Firefox                2. Chrome

最佳答案

你需要一个梯度：

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

DEMO

关于javascript - 选择框中的双色选项，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33368038/