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

Question

如果我有一个<select>下拉列表，我可以通过CSS设置每个选项的颜色;但是，当选择/设置为下拉列表的"选定"值时，该选项的CSS不会延续。

即，如果#default选项的 CSS 是"color：red">并且它被选中，则该选项的颜色在下拉列表中为红色，但一旦单击/选择，它就会使用<select>属性的 CSS，即黑色。它使用所选内容的 CSS 这一事实很好，但它需要根据所选的<option>颜色更改颜色。

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

小提琴：https://jsfiddle.net/xpvt214o/179011/

.CSS：

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

.HTML：

<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>

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 进行交互。

有许多插件可用于自定义选择元素。查看它们，看看其中是否有任何支持您正在寻找的内容。以下是一些参考资料 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