html/css 2种颜色1选项选择列表

Question

在我的PHP系统中，人们可以选择一种颜色组合。我与一个选项列表中选择这样做的：

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

现在，每个选项都有1点的颜色，是可以给予1种选择2种颜色。所以选项的前半部分有1种颜色，另一半选项有另一种颜色。

Answer 1

纯CSS没有图像，我认为你不能这样做。我建议你使用图像。

LIVE DEMO

我用线性渐变在此演示（注：变化与-webkit-linear-gradient如果-moz-linear-gradient您正在使用FF或-o-linear-gradient如果你正在使用Opera）。它适用于div元素，但不能应用于选项背景（请参阅演示）。

Answer 2

您可以使用SCSS来做到这一点。这里网站教你所有的事情。
--otherwise
如果使用不同的颜色差异类指

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

或u使用相同的颜色意味着

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

或

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