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>