hawkmaster: Auswahlliste (select) Option Hintergrundfarbe

Hallo zusammen,

Ich habe ein "<select>" das mehrspaltig aufgebaut ist.
Die erste "Spalte" zeigt einen Status in verschiedenen Farben an.
Zuerst habe ich etwas mit Hintergrundgrafik versucht:
style=\"background:url('../image/jobtk/status/".$image."') 0px 2px no-repeat;
Das klappt zwar wunderbar im FF, aber nicht mal der IE8 kann es anzeigen.

Nun versuche ich es mit "background-color:".
style="background-color:#555555;margin:1;width:25px;"
Es soll aber nicht die ganze Zeile eine Hintergrundfarbe bekommen, sondern nur ein kleines Stück.

  
<select name="sel_state" size="10" class="monospace" style="width:832px;">  
<option style="background-color:#555555;margin:1;width:25px;" value="">X&nbsp;&nbsp;180-WERP.doc&nbsp;&nbsp;29.10.2009&nbsp;8:40:10&nbsp;&nbsp;</option>  
<option style="background-color:#FF6555;margin:1;width:25px;" value="">X&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Test.xls&nb  
...  

Leider ignoriert der IE die "width" Angabe. Bei FF wird es korrekt angezeigt.
Wenn man aber auf die Liste klickt, dann wird die restliche Schrift ja weiss und der Hintergrund ist auch weiss und nicht mehr blau.
Also ist diese Lösung auch nicht so geeignet.

Ich vermute fast für mein Vorhaben gibt es keine Lösung?

vielen Dank und viele Grüße
hawk

  1. Ich vermute fast für mein Vorhaben gibt es keine Lösung?

    aus gutem Grund:

    Alle Farbmanipulationen ausser border-color in <option> sind problematisch
    Du kennst nicht

    • die Hintergrundfarbe, die der User in seiner GUI hat.
    • die Vordergrundfarbe, die der User in seiner GUI hat.
    • die Hintergrundfarbe im selected Zustand
    • die Vordergrundfarbe im selected Zustand

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
    1. Hallo Beat,
      danke dir für deine Hilfe.

      Alle Farbmanipulationen ausser border-color in <option> sind problematisch
      Du kennst nicht

      • die Hintergrundfarbe, die der User in seiner GUI hat.
      • die Vordergrundfarbe, die der User in seiner GUI hat.
      • die Hintergrundfarbe im selected Zustand
      • die Vordergrundfarbe im selected Zustand

      Ja ich weiss bzw. habe es gemerkt das es problematisch wird.
      Vielleicht klappt es erst vernünftig, wenn CSS3 da ist.

      Hast du vielleicht irgend eine Idee oder einen Workarround?
      Ich habe schon überlegt, daß ich neben dem <select> ein zweites Select das nur die Farben hat platzieren. Aber dann sieht es wieder nicht so schön aus bzw. ich müsste per JS die beiden Selects verbinden.

      vielen Dank und viele Grüße
      hawk

      1. Hast du vielleicht irgend eine Idee oder einen Workarround?

        Ersetze die Selectbox durch eine Liste, und verbinde Interaktion mit dieser Liste durch JS mit einer versteckten Selectbox.

        mfg Beat

        --
        ><o(((°>           ><o(((°>
           <°)))o><                     ><o(((°>o
        Der Valigator leibt diese Fische
        1. Hallo Beat,

          Ersetze die Selectbox durch eine Liste, und verbinde Interaktion mit dieser Liste durch JS mit einer versteckten Selectbox.

          Du meinst die Werte "values" die ich bisher im Select angezeigt habe, in einer Liste mit "ul" und "li" anzeigen?

          Könnte ich mal versuchen?
          Was meinst du mit "verbinde mit versteckter Selectbox"?
          In diesem Fall brauche ich die Werte eigentlich nur zum anzeigen.
          Ich habe eine Selectbox gewählt, weil ich dadurch halt eine feste Höhe auf dem Formular habe. Die geladenen Werte bzw. zeilen können recht unterschiedliche sein. Bei einer Liste verändert sich halt auch das Aussehen und die Höhe weil ma ja keine Scrollbar hat wie im Select.

          vielen Dank und viele Grüße
          hawk

          1. Hi,

            Was meinst du mit "verbinde mit versteckter Selectbox"?

            Das würde die Möglichkeit bereistellen, das ganze anschliessend noch mit einem "normalen" Formular abzuschicken (versteckte Inhuptfelder tätens dazu auch), denn Listen sind keine Formularelemente, also würden nur mit diesen keine Werte übertragen. Ausserdem könnte man darauf auch noch von anderen Stellen aus mit JavaScript auf dem gewohnten Wege zugreifen, also bspw. einen selectedIndex abfragen oder auch setzen, etc.

            In diesem Fall brauche ich die Werte eigentlich nur zum anzeigen.

            Dann erübrigt sich obiges wohl.

            Ich habe eine Selectbox gewählt, weil ich dadurch halt eine feste Höhe auf dem Formular habe. Die geladenen Werte bzw. zeilen können recht unterschiedliche sein. Bei einer Liste verändert sich halt auch das Aussehen und die Höhe weil ma ja keine Scrollbar hat wie im Select.

            Falsch. CSS existiert.

            MfG ChrisB

            --
            “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
            1. Hallo ChrisB,
              danke dir für deine Hilfe.

              Falsch. CSS existiert.

              Was meinst du damit?
              Das man mit CSS eine Scrollbar machen kann?
              Das man mit CSS die Höhe eingrenzen kann?
              Oder?

              Die Höhe begrenzen z.b. über ein DIV wäre mir klar. Nur wie macht man es dann, wenn es mehr Zeilen (aus der DB) gibt als im Div angezeigt werden können?

              vielen Dank und viele Grüße
              hawk

              1. Hi,

                Die Höhe begrenzen z.b. über ein DIV wäre mir klar.

                Da wir von Listen reden, sollte eher UL bzw. OL entsprechend formatiert werden.

                Nur wie macht man es dann, wenn es mehr Zeilen (aus der DB) gibt als im Div angezeigt werden können?

                Dann lässt man Scrollen.

                MfG ChrisB

                --
                “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
                1. Hallo ChrisB,

                  Dann lässt man Scrollen.

                  Irgendwie verstehe ich was nicht:
                  Momentan zeige ich sagen wir mal 50 Werte aus einer DB-Tabelle in einem Select an. Hier ist die Höhe mit size=10 immer gleich. Innerhalb des Select kann man ja dann die Zeilen Scrollen.
                  wenn ich nun aber das ganze mit UL und LI machen würde, wären ja alle 50 Zeilen untereinander und würden fast das ganze Fenster befüllen. Also müsste man innerhalb des Browserfensters nach unten scrollen um den restlichen Inhalt zu sehen.
                  Hast du es so gemeint?
                  Das würde dann halt das Aussehen sehr verändern.

                  vielen Dank und viele Grüße
                  hawk

                  1. Dann lässt man Scrollen.
                    Irgendwie verstehe ich was nicht:
                    Momentan zeige ich sagen wir mal 50 Werte aus einer DB-Tabelle in einem Select an. Hier ist die Höhe mit size=10 immer gleich. Innerhalb des Select kann man ja dann die Zeilen Scrollen.
                    wenn ich nun aber das ganze mit UL und LI machen würde, wären ja alle 50 Zeilen untereinander und würden fast das ganze Fenster befüllen. Also müsste man innerhalb des Browserfensters nach unten scrollen um den restlichen Inhalt zu sehen.

                    Du kennst die overflow Eigenschaft im Zusammenhang mit height und max-height?

                    mfg Beat

                    --
                    ><o(((°>           ><o(((°>
                       <°)))o><                     ><o(((°>o
                    Der Valigator leibt diese Fische
                    1. Hallo Beat,

                      Du kennst die overflow Eigenschaft im Zusammenhang mit height und max-height?

                      wenn du mich so direkt frägst: Nein

                      vielen Dank und viele Grüße
                      hawk