✔ Problem mit background eines Dropdown in FF und IE

nic1981 · 11. Juli 2010

Hallo Zusammen!

Ich habe ein Problem, das im Internet schon desöfteren auch in anderen Foren aufgetaucht ist, aber nie so richtig gelöst wurde.

Ich habe ein html-datei, die ein CSS-Script integriert hat.

Folgender Code

HTML:

<select size="1" name="Wurffeld1">
     <option id="a" value="0">W&uuml;rfe</option>
     <option id="b" value="100">100</option>
     <option id="b" value="200">200</option>
</select>

Im <HEAD> habe ich dann folgenden CSS-Code:

HTML:

<style type="text/css">
<!--
  #a {
         background-color:#F82811;
  }
             
  #b {
         background-color:#11FE02;
  }
-->
</style>

Die Aufgabe des Codes ist es, zur Laufzeit über die id die Hintergrundfarbe der SelectBox zu ändern.
Dieses funktioniert beim IE tadellos, aber beim Firefox kann ich in der Auswahlliste zwar die Farben beim anklicken sehen, doch wenn ich mich dann für eine der Auswahlmöglichkeiten entschieden habe, ignoriert er die Hintergundfarbe und setzt diese auf weiß. Es steht nun die richtige Auswahl dort aber die Farbe ist nicht zu sehen. Selbst wenn ich in CSS background statt background-color benutze hat das keine Auswirkungen auf das Anzeigeergebnis.

Suche dringend Hilfe!

Viele Grüße,
nic1981

Maik · 12. Juli 2010

Hi,

die Formular-Steuerelemente lassen sich nicht betriebssystem- und browserübergreifend einheitlich formatieren, wie es der Artikel Styling form controls und Styling even more form controls verdeutlichen, hier im Detail Styled select boxes und Styled multiple select boxes.

Übrigens darf ein ID-Bezeichner (hier ID "b") im Dokumentbaum nicht mehrmals vergeben werden.

mfg Maik

nic1981 · 12. Juli 2010

Hi Maik!

Danke für die Antwort!

Ich werde mir mal die Texte durchlesen. Ok, mit dem Dokumentenbaum verstehe ich. Darf ich aber z.B.: id=b im gesamten Dokument nur 1mal verwenden oder darf ich es im neuen select-tag wieder verwenden?

Doch wie kann ich mein Problem jetzt lösen?

Viele Grüße,
nic1981

Maik · 12. Juli 2010

Geht es aus meinem Beitrag und den genannten Seiten nicht klar hervor, dass es hierfür keine browserübergreifende Lösung gibt?

Den ID-Bezeichner darfst du nur einmal zwischen <body></body> vergeben.

mfg Maik

Godstyle · 12. Juli 2010

versuch es mal so:

PHP:

<select size="1" name="Wurffeld1">
     <option class="a" value="0">W&uuml;rfe</option>
     <option class="b" value="100">100</option>
     <option class="b" value="200">200</option>
</select>

PHP:

<style type="text/css">
<!--
  .a {
         background-color:#F82811;
  }
             
  .b {
         background-color:#11FE02;
  }
-->
</style>

Maik · 12. Juli 2010

Godstyle hat gesagt.:

versuch es mal so:

PHP:

<select size="1" name="Wurffeld1">
     <option class="a" value="0">W&uuml;rfe</option>
     <option class="b" value="100">100</option>
     <option class="b" value="200">200</option>
</select>

PHP:

<style type="text/css">
<!--
  .a {
         background-color:#F82811;
  }
             
  .b {
         background-color:#11FE02;
  }
-->
</style>

Versuch's doch selber, bevor du hier sinnlose Vorschläge postest.

Ob nun ein ID- oder Klassenbezeichner verwendet wird, ist hier nämlich unerheblich.

mfg Maik

Godstyle · 12. Juli 2010

habe ich doch siehe anhang. das blaue ist nur weil ich mit der maus drauf war.

wenn ich das sichtbare im dropdown anders haben will mache ich es so:

PHP:

<select class="a" size="1" name="Wurffeld1">
     <option class="b" value="0">W&uuml;rfe</option>
     <option class="b" value="100">100</option>
     <option class="b" value="200">200</option>
</select>

daher verstehe ich nicht weshalb es unangebracht war.

Maik · 12. Juli 2010

Ganz einfach aus diesem Grund:

nic1981 hat gesagt.:
Die Aufgabe des Codes ist es, zur Laufzeit über die id die Hintergrundfarbe der SelectBox zu ändern.
Dieses funktioniert beim IE tadellos, aber beim Firefox kann ich in der Auswahlliste zwar die Farben beim anklicken sehen, doch wenn ich mich dann für eine der Auswahlmöglichkeiten entschieden habe, ignoriert er die Hintergundfarbe und setzt diese auf weiß.

mfg Maik

nic1981 · 12. Juli 2010

Hallo ihr beiden!

Bitte nicht streiten!

Danke für eure Hilfe!
Mit dem Classattribut funktioniert es leider auch nicht. Ist ja prinzipiell absolut richtig, denn class darf ich öfters verwenden, hingegen ich id nur 1 mal verwenden darf.
Aber komischerweise hat die Gruppenzuordnung über class auch keine Auswirkung in Mozilla.

Das komische ist ja, das im DropdownMenü bei klick die Farben richtig angezeigt werden, aber beim übernehmen bleibt das Ausgeählte weiß (siehe Anhang).

Was kann ich tun? JavaScript?

Viele Grüße,
Nico

Hallo Zusammen --- Problem gelöst --- mit JavaScript!

MIt etwas kleinem Aufwand konnt ich die Problematik InternetExplorer und Firefox lösen.
MIt Hilfe von JavaScript.

Beispiel:

HTML:

<body text="#FFFFFF" bgcolor="#000000" style="font-family:Verdana" onLoad="GoGreen()">
....
....
....
<tr>
    <th id="id1"><?php $id=1;?>Max Muster</th>
    <td  width="70"><select size="1" name="SpieltagID1" id="SpieltagID1" onChange="GoGreenA()">
                 <option id="a" value="s0">Spieltag</option>
                 <?php include '../../include-files/Dropdown.php';?>
         </select>
    </td>
    <td width="70" ><select name="Wurffeld1" id="Wurffeld1" size="1" onChange="GoGreenA()">
                 <option id="a" value="0" >W&uuml;rfe</option>
                 <option id="b" value="100">100</option>
                 <option id="b" value="200">200</option>
         </select>
    </td>
    <td>Ergebnis: <input type="text" maxlength="4" size="5" id="Eingabe1" name="Eingabe1" onKeyup="GoGreen()"> </td>
    <td id="klein"><?php include '../../include-files/LetzterSpieltag.php';?></td>
    <?php include '../../include-files/BilderOKNotOkEintrag.php';?>
</tr>
....
....
....
</body>

Folgender JavaScript-Code:

Code:

<!--
     function GoGreenA(){
      for(var i = 1; i <= 2; i++){
                FeldA = "Wurffeld"+i;
                if(window.document.getElementById(FeldA).value > 0){
                    window.document.getElementById(FeldA).style.backgroundColor="#11FE02"; //Gruen


                }
                else{
                     window.document.getElementById(FeldA).style.backgroundColor="#F82811";   //Rot

                }
           }
       for(var a = 1; a <= 2; a++){
                FeldB = "SpieltagID"+a;
                if(window.document.getElementById(FeldB).value == "s0"){
                    window.document.getElementById(FeldB).style.backgroundColor="#F82811"; //Rot


                }
                else{
                     window.document.getElementById(FeldB).style.backgroundColor="#11FE02";   //Gruen

                }
           }
     
     
     }

     function GoGreen(){
           for(var i = 1; i <= 2; i++){
                Feld = "Eingabe"+i;

                if(window.document.getElementById(Feld).value==""){
                    window.document.getElementById(Feld).style.backgroundColor="#F82811";

                }
                else{

                     window.document.getElementById(Feld).style.backgroundColor="#11FE02";
                }
           }
           for(var a = 1; a <= 2; a++){
                FeldA = "Wurffeld"+a;
                if(window.document.getElementById(FeldA).value > 0){
                    window.document.getElementById(FeldA).style.backgroundColor="#11FE02"; //Gruen


                }
                else{
                     window.document.getElementById(FeldA).style.backgroundColor="#F82811";   //Rot

                }
           }
           for(var a = 1; a <= 2; a++){
                FeldB = "SpieltagID"+a;
                if(window.document.getElementById(FeldB).value == "s0"){
                    window.document.getElementById(FeldB).style.backgroundColor="#F82811"; //Rot


                }
                else{
                     window.document.getElementById(FeldB).style.backgroundColor="#11FE02";   //Gruen

                }
           }


     }

Ich lese in Javascirpt immer die ID der Selectfelder aus. Sie werden bei mir im Quellcode immer um eins erhöht, also Wurffeld1, Wurffeld2,....
Über den onChange() Befehl überprüft nun die Funktion, ob sich der ID-Wert geändert hat und passt dementsprechend die Hintergrundfarbe an.

Es ist ein bisschen umständlich aber es funktioniert bei den beiden Browsern tadellos.

Mmh, was meint ihr?

Viele Grüße,
nic1981

Maik · 13. Juli 2010

Was sollen wir dazu schon groß meinen, wenn's so funktioniert?

mfg Maik

✔ Problem mit background eines Dropdown in FF und IE

nic1981

Grünschnabel

Maik

nic1981

Grünschnabel

Maik

Godstyle

Erfahrenes Mitglied

Maik

Godstyle

Erfahrenes Mitglied

Anhänge

Maik

nic1981

Grünschnabel

Anhänge

Maik

Neue Beiträge