选择框中的双色选项答案

【问题标题】：Dual color option in select box选择框中的双色选项
【发布时间】：2015-10-27 12:28:52
【问题描述】：

如图所示，我在选择框中有 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

【问题讨论】：

标签： javascript html css

【解决方案1】：

你需要一个渐变：

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

DEMO

【讨论】：

奇怪的是，它在 Firefox 上运行，但在 Chrome 中却没有......这是我自己以前做过的，但它在 Chrome 中只是白色的。
嗯，它应该可以工作，因为 prefixes are not needed 适用于 Fx 10+、Op 11.6+、Ch 26+、IE 10。
我刚刚检查过，我有最新的 Chrome。其他渐变正在工作，但不在选择框中。会到处玩。也许我会找到解决办法。
你试过this吗？似乎是Chrome不允许这种样式:(
看起来我必须有两个选择框。无论如何，谢谢你！

【解决方案2】：

这是你的代码：

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

【讨论】：

奇怪的是，它在 Firefox 上运行，但在 Chrome 中却没有......这是我自己以前做过的，但它在 Chrome 中只是白色的。