Olaf Schneider: selektierte Option (in Firefox) formatieren.

SELF-Forum

selektierte Option (in Firefox) formatieren.

Olaf Schneider Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo,

es ist ja leicht möglich, einige Formatierungen, wie Hintergrunds- und Textfarbe an <option>-Feldern vorzunehmen. Allerdings wird (zumindest unter Firefox) der Style nicht auf das aktuell selektierte Element angewendet, welches im unaufgeklappten Zustand angezeigt wird.

Gibt es eine Möglichkeit, auf dieses Element Stile anzuwenden?

Gruß
Olaf Schneider

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. selektierte Option (in Firefox) formatieren.

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hello out there!

    es ist ja leicht möglich, einige Formatierungen, wie Hintergrunds- und Textfarbe an <option>-Feldern vorzunehmen. Allerdings wird (zumindest unter Firefox) der Style nicht auf das aktuell selektierte Element angewendet, welches im unaufgeklappten Zustand angezeigt wird.

    Auf _welches_? Du lässt also nur eins anzeigen? <select size="1">?

    Gibt es eine Möglichkeit, auf dieses Element Stile anzuwenden?

    Ja; eben auf dieses.

    See ya up the road,
    Gunnar

    --
    “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. selektierte Option (in Firefox) formatieren.

      Olaf Schneider Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hallo,

      Auf _welches_? Du lässt also nur eins anzeigen? <select size="1">?

      Ok, diese Info fehlte und Du hast richtig geraten ;-)

      Gibt es eine Möglichkeit, auf dieses Element Stile anzuwenden?

      Ja; eben auf dieses.

      Äh?

      Entweder habe ich Deine Antwort nicht verstanden oder meine Frage schwach formuliert.

      Wenn ich eine einzelne Option mit css (via einer Klasse) formatiere, so wird im aktiven Zustand (Maus über der Selektbox, Dropdownliste ist aktiv zu sehen) diese Option wie erwartet in der Liste formatiert angezeigt.

      Wähle ich diese Option aus und verlasse die Selektbox (oder lade die Seite mit dieser Option voreingestellt), so wird kein Stil angewendet und der Text steht einfach schwarz auf weiss da.

      Meine Frage war, ob es möglich ist, auch diese Anzeige per css zu formatieren.

      (mögliche Anwendungen: Farbwähler, farbige Statusanzeige etc.)

      Gruß
      Olaf Schneider

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. selektierte Option (in Firefox) formatieren.

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hello out there!

        Entweder habe ich Deine Antwort nicht verstanden

        Ich hatte nur ein Element angegeben; dieses wäre also zu formatieren.

        oder meine Frage schwach formuliert.

        Oder das.

        Du willst das Select-Feld in Abhängigkeit von der ausgewählten Option formatieren? Das riecht nach JavaScript.

        See ya up the road,
        Gunnar

        --
        “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. selektierte Option (in Firefox) formatieren.

          Der Martin
          – Informationen zu den Bewertungsregeln

          Hallo Gunnar,

          Du willst das Select-Feld in Abhängigkeit von der ausgewählten Option formatieren?

          ich hatte Olaf eher so verstanden, dass er das momentan ausgewählte option-Element individuell formatieren möchte. Gibt es wohl eine Pseudoklasse :selected für das option-Element?

          Falls nicht ...

          Das riecht nach JavaScript.

          und falls doch ...

          Das riecht nach JavaScript.

          denn der IE kann's ganz sicher nicht. :-P

          Ciao,
           Martin

          --
          Nicht jeder, der aus dem Rahmen fällt, war vorher im Bilde.
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. selektierte Option (in Firefox) formatieren.

            Olaf Schneider Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Hallo Gunnar, hallo Martin,

            ich meinte eher folgendes:

            selectbox Bulldoge

            In der Auswahliste wird der Text „· Land“ formatiert dargestellt. Die oberste Zeile, quasi der Anfasser, wird nicht formatiert dargestellt.

            Ist es möglich, den oberen Teil (ruhig identisch) per css zu formatieren oder ist für die Darstellung ausschließlich die Oberfläche des Betriebssystems zuständig?

            Gruß
            Olaf Schneider

            P.S.: Der Screenshot zeigt Firefox unter Mac OS X.

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. selektierte Option (in Firefox) formatieren.

              Gunnar Bittersmann Homepage des Autors
              – Informationen zu den Bewertungsregeln

              Hello out there!

              In der Auswahliste wird der Text „· Land“ formatiert dargestellt. Die oberste Zeile, quasi der Anfasser, wird nicht formatiert dargestellt.

              Gehe zurück in die Badstraße.

              See ya up the road,
              Gunnar

              --
              “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. selektierte Option (in Firefox) formatieren.

                Olaf Schneider Homepage des Autors
                – Informationen zu den Bewertungsregeln

                Hallo Gunnar,

                aus Deinen Postings entnehme ich folgendes: Javascript Jepp, css No!

                Eine Javascriptvariante wäre (erste Version, nur unter Firefox getestet):

                (1) Der Javascript-Block

                  
window.onload = function() {  
 test = document.getElementById('test')  
 setSelectStyle(test);  
  
 test.onchange = function() {  
  setSelectStyle(test);  
 }  
}  
  
function setSelectStyle(obj) {  
 selectedOption = obj.getElementsByTagName('OPTION')[obj.selectedIndex];  
 obj.style.color = selectedOption.style.color;  
}  


                  
  
(2) Der html-Body  
  
<body>  
 <form action="#">  
  <select id="test" style="color: blue;" >  
   <option style="color: red;" >Rot</option>  
   <option style="color: yellow;" >Gelb</option>  
   <option style="color: green;" >Grün</option>  
  </select>  
 </form>  
</body>

                Gruß
                Olaf Schneider

                P.S:

                Gehe zurück in die Badstraße.

                Aha, das ist also die Badstraße. Nicht schön, aber günstige Wohnungen. Sowas haben wir hier in München nicht.

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

          2. selektierte Option (in Firefox) formatieren.

            Gunnar Bittersmann Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Hello out there!

            Gibt es wohl eine Pseudoklasse :selected für das option-Element?

            :checked. Aber erst in CSS 3. [CSS3-SELECTORS §6.6.4]

            See ya up the road,
            Gunnar

            --
            “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

    2. selektierte Option (in Firefox) formatieren.

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hello out there!

      Auf _welches_? Du lässt also nur eins anzeigen? <select size="1">?

      Gibt es eine Möglichkeit, auf dieses Element Stile anzuwenden?

      Ja; eben auf dieses.

      Um die Missverständnisse auszuräumen: Mit „dieses“ war nicht die ausgewählte 'option' gemeint, sondern das oben genannte HTML-Element.

      See ya up the road,
      Gunnar

      --
      “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln