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

您可以使用SCSS执行此操作。这里网站教你所有的东西。
--otherwise
如果你对diff类使用不同的颜色意味着

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

或使用相同的颜色意味着

 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>

Answer 2

对于没有图像的纯CSS，我认为你无法做到。我建议您使用图像。

<强> LIVE DEMO

我在此演示中使用线性渐变（注意：如果您使用的话，则使用-webkit-linear-gradient更改-moz-linear-gradient;如果您使用的是Opera，则使用-o-linear-gradient 。它适用于div元素，但不能应用于选项背景（请参阅演示）。

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

2 个答案: