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

如果我有＆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'）; } }）; }）;

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

1 个答案: