通过 CSS 设置选定的选项？答案

【问题标题】：Set selected option via CSS?通过 CSS 设置选定的选项？
【发布时间】：2023-03-04 07:09:04
【问题描述】：

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

我想知道样式表中是否可能出现以下内容：

option.selected {
  selected: true;
}

然后在 HTML 中：

<option class="selected">

这与设置selected 属性的效果相同。这种技术可行吗？

【问题讨论】：

标签： html css xhtml html-select

【解决方案1】：

不，CSS 只改变表示，而不是内容（虽然 CSS3 确实支持对内容进行一些修改，但不支持值的选择。）如果不能直接修改 HTML，则需要使用 JavaScript。

【讨论】：

【解决方案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 类来做到这一点。

【讨论】：

【解决方案3】：

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

如果您想显示先前标记的选择 - 在显示结果后与用户的更改无关，旧的选择保持 sykblue，新的更改为深蓝色。

【讨论】：

【解决方案4】：

如果您使用 JQuery，那么您可以按照这些思路做很多事情，但不能单独使用 CSS。

【讨论】：

【解决方案5】：

是的，有可能，但我不确定 IE

下面的代码将改变默认选中项的样式。

           <style>
           option[selected="selected"] {
           color:red;
           font-weight:bold
           }
           </style>

           <select>
           <option value="1">Txt</option>
           <option value="2" selected="selected">Another Txt</option>
           </select>

【讨论】：

【解决方案6】：

Selected 不是 CSS 属性。请参阅 http://www.w3.org/TR/CSS2/propidx.html 的规范。

【讨论】：