Javascript 根据所选选项，使用CSS更新颜色

如果我有一个下拉列表，我可以通过CSS设置每个选项的颜色；但是，当选择/设置该选项作为下拉列表的选定值时，该选项的CSS不会继续

也就是说，如果默认选项的CSS为color:red，并且选中了它，则该选项的颜色在下拉列表中为红色，但单击/选中后，它将使用属性的CSS，即黑色。事实上，它使用select的CSS是可以的，但是它需要根据所选的颜色改变颜色

我在Javascript+JQuery中做了以下工作来解决这个问题，但我只是想知道是否有一种方法可以在不使用JS的情况下实现这一点。我看到了一个使用下拉列表的必需参数并将默认值设置为NULL的示例，但是，我可能允许提交带有一些默认/空白字段的表单，并希望站点菜单具有统一的感觉

小提琴：

CSS:

HTML:

---

这在任何其他方面都是不可能的

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

有许多插件可用于定制select元素。查看他们，看看他们中是否有人支持你正在寻找的东西。这里有一些参考资料

---

没有jQuery是不可能的。标签是最难定制的标签之一，省去了一些麻烦，还可以使用插件。正如@zer00ne所提到的，定制标签是一个非常具有挑战性的元素，特别是如果你想保持跨浏览器兼容的话。您最好尝试创建一个自定义元素，然后将值传递给一个隐藏的输入字段。谢谢大家。在这种情况下，如果我预见将来需要更多类似这样的功能，我将开始研究select的插件@阿德里亚诺，你介意扩展一下你所说的将值传递给隐藏的输入字段是什么意思吗？你可以这样做，并将select的值分配给一个隐藏的文本输入字段，该字段将在提交时发送。请参见此示例：

option {color: green;}
#default {color: red;}

<select id="select">
  <option value='-1' id="default">Please select option</option>
  <option value='1'>One</option>
  <option value='10'>Ten</option>
  <option value='100'>One Hundred</option>
</select>

$(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');
    }
  });
});