1

在我的 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 种颜色。所以选项的前半部分有一种颜色，而后半部分的选项有另一种颜色。

4

2 回答 2

2

您可以使用SCSS做到这一点。这里的网站教你所有的东西。
--否则
，如果您对差异类使用不同的颜色意味着

 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>
于 2012-11-09T10:03:53.407 回答
1

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

现场演示

我在这个演示中使用了线性渐变（注意：如果你-webkit-linear-gradient使用-moz-linear-gradient的是 FF，或者-o-linear-gradient如果你使用的是 Opera，则更改为）。它适用于div元素，但不能应用于选项背景（参见演示）。

于 2012-11-09T10:19:54.353 回答