通過CSS設置選定的選項？

Question

是否可以通過CSS類來設置option標記的selected屬性？

我想知道如果像下面是可能的樣式表：

option.selected { 
    selected: true; 
} 

然後在HTML：

<option class="selected"> 

這將作爲設置selected屬性相同的效果。這種技術可行嗎？

Answer 1

不，CSS只改變了表示，而不是內容（儘管CSS3確實支持對內容進行一些修改，但不支持值的選擇）。如果不能直接修改HTML，則需要使用JavaScript。

Answer 2

如果你使用JQuery，那麼你可以沿着這些線做非常多的事情，但不是自己的CSS。

Answer 3

不通過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 4

選定不是CSS屬性。請參閱http://www.w3.org/TR/CSS2/propidx.html的規格。

Answer 5

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

如果你想顯示上標明的選擇 - 從用戶的變化的影響無關顯示結果後，選擇的老留sykblue，新變化是darkblue。

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>