使用CSS更新<select>颜色，具体取决于所选的选项

Question

如果我有＆lt; select＆gt;下拉列表，我可以通过CSS设置每个选项的颜色;但是，选项的CSS在被选中/设置为下拉列表的“选定”值时不会被转移。 即如果#default选项的CSS为“color：red”并且已选中，则选项的颜色在下拉列表中为红色，但一旦单击/选中，它将使用＆lt; select＆gt;的CSS。属性，黑色。它使用select的CSS的事实很好，但它需要根据所选的＆lt;选项＆gt;来改变颜色。颜色。 我已经在Javascript + JQuery中完成了以下操作来解决它，但我只是想知道是否有一种方法可以在不使用JS的情况下实现这一点。我看到了一个使用下拉列表的“required”参数并将默认值设置为NULL的示例，但是，我可能允许使用一些默认/空白字段提交此表单，并希望对网站的菜单有一个统一的感觉。 小提琴：https：//jsfiddle.net/xpvt214o/179011/ CSS： 选项{color：green;} #default {color：red;} HTML： ＆lt; select id =“select”＆gt;   ＆lt; option value =' - 1'id =“default”＆gt;请选择选项＆lt; / option＆gt;   ＆lt; option value ='1'＆gt; One＆lt; / option＆gt;   ＆lt; option value ='10'＆gt; Ten＆lt; / option＆gt;   ＆lt; option value ='100'＆gt; One Hundred＆lt; / option＆gt; ＆LT; /选择＆GT; 使用Javascript： $（document）.ready（function（）{   var sel = $（'＃select'）;   sel.css（'color'，'red'）;   sel.change（function（）{     if（sel.val（）！= -1）{       sel.css（'color'，'green'）;     } else {       sel.css（'color'，'red'）;     }   }）; }）;

Answer 1

这是不可能以任何其他方式。

CSS / HTML是声明性的。它们本质上不是动态的，并且不支持动态样式（除了使用伪选择器和属性可以实现的功能）。为此，您需要使用JS / jQuery与DOM进行交互。

有许多插件可用于自定义select元素。检查一下，看看是否有任何支持您正在寻找的东西。这里有一些参考 https://www.sitepoint.com/13-jquery-selectboxdrop-down-plugins/ https://www.learningjquery.com/2017/09/20-impressive-jquery-plugins-to-replace-the-html-select-box