Question

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

我想知道在样式表中是否可以使用以下内容：

option.selected {
  selected: true;
}

然后在HTML中：

<option class="selected">

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

Answer 1

不，CSS只会改变演示文稿，而不是内容（尽管CSS3支持对内容进行一些修改，但不支持选择值。）如果无法直接修改HTML，则需要使用JavaScript。 / p>

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

如果您想要显示之前标记的选择 - 在显示结果后独立显示用户的更改，旧的选定保留为sykblue，新的更改将显示为深蓝色。

Answer 4

如果您使用JQuery，那么您可以在这些方面做很多事情，但不能单独使用CSS。

Answer 5

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

Answer 6

是的，这是可能的，但我不确定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>

通过CSS设置选定的选项？

6 个答案: