Ausgewählte Option über CSS festlegen?

Question

Kann das Attribut selected eines Tags option über eine CSS-Klasse festgelegt werden?

Ich frage mich, wenn so etwas wie die folgende ist möglich in einem Stylesheet:

option.selected { 
    selected: true; 
} 

dann in HTML:

<option class="selected"> 

die die gleiche Wirkung wie die Einstellung der selected Attribut haben würde. Ist diese Technik möglich?

Answer 1

Nein, CSS ändert nur die Darstellung, nicht den Inhalt (obwohl CSS3 einige Modifikationen des Inhalts unterstützt, aber nicht die Auswahl von Werten.) Sie müssen JavaScript verwenden, wenn Sie den HTML-Code nicht direkt ändern können.

Answer 2

Wenn Sie JQuery verwenden, können Sie sehr viel in diesen Bereichen tun, aber nicht CSS allein.

Answer 3

Nicht via CSS, aber es kann über Javascript erreicht werden.

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; 

Wie andere Leute haben darauf hingewiesen, bin ich nicht sicher, warum Sie es über eine CSS-Klasse in erster Linie tun wollen würden.

Answer 4

Ausgewählt ist keine CSS-Eigenschaft. Siehe die Spezifikation unter http://www.w3.org/TR/CSS2/propidx.html.

Answer 5

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

, falls Sie die vorherige markierte Auswahl anzeigen möchten - independend der Änderungen vom Benutzer nach der Anzeige eines Ergebnisses wählte die alte bleiben sykblue sind die neuen Änderungen in dunkelblau.

Answer 6

Ja, es ist möglich, aber ich bin nicht sicher IE

Im Folgenden Code Stil für Element ausgewählt Standardeinstellung ändern.

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