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

【问题标题】：html/css 2 colors in 1 option select listhtml/css 1 个选项中的 2 种颜色选择列表
【发布时间】：2012-11-09 09:52:53
【问题描述】：

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

【问题讨论】：

我不认为你可以为 option 这样做，但你可以为 div 元素做这样的事情。
如果不添加 50:50 的背景图片，您将无法做到这一点

标签： html css colors html-select

【解决方案1】：

您可以使用SCSS 执行此操作。这里的网站教你一切。
--否则
如果你对 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>

【讨论】：

这不是 OP 想要的，他要求一种选择两种颜色。
感谢您的回答，但这并不是我的意思。我的意思是背景颜色是其他颜色的 50/50。

【解决方案2】：

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

LIVE DEMO

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

【讨论】：