是否通过CSS设置选定的选项？

Question

可以通过CSS类设置option标签的selected属性吗？

我想知道在样式表中是否可以实现如下所示：

option.selected {
  selected: true;
}

然后在HTML中：

<option class="selected">

这将具有与设置selected属性相同的效果。这项技术可行吗？

Answer 1

不，CSS只改变表示，不改变内容(尽管CSS3确实支持对内容进行一些修改，但不支持值的选择)。如果你不能直接修改超文本标记语言，你需要使用JavaScript。

Answer 2

不是通过CSS，但可以通过javascript来完成。

function setSelects() {

    var allSelects = document.getElementsByTagName("select");
    for (var i = 0; i < allSelects.length; i++) {
        for (var j = 0; j < allSelects[i].options.length; j++) {
            if (allSelects[i].options[j].className == "selected") {

                allSelects[i].selectedIndex = j;
            }
        }
    }
}

window.onload = setSelects;

正如其他人所指出的那样，我不确定为什么首先要通过CSS类来做这件事。

Answer 3

option[selected] {background-color:skyblue;color:white;}

如果您希望在显示结果后显示用户之前标记的与选择无关的更改，则旧的选定内容将保持系统蓝色，而新的更改将显示为深蓝色。