Dropdown anpassen

[Taney]

Hi,
bei nem Dropdown lassen sich wie es aussieht nicht alle CSS-Formatierungen anwenden.

Meine Frage wäre, ob man denn die Auswahlfelder nicht großartig anpassen kann. Sprich, Höhe der einzelnen Zeilen (Optionen)?
Den Rahmen entfernen, Scrollbalken anpassen?

Ist das überhaupt problemlos möglich. Würde zwar gerne auch Icons oder kleine Bildchen in die Auswahlliste einfügen, geht aber mit den meißten Browsern wohl nicht.

Viele Grüße

[dr.colossos]

Hi,

schau mal auf das erste Auswahlfeld bei http://www.ajaxload.info/.

In FF und Opera geht das, im IE nicht (auch nicht 7.0).

Scrollbalken geht wiederum nur in IE (evtl. auch Opera).

IE kann glaub ich ein paar Sachen bei den Optionen (background-color), is aber weitweniger flexibel als andere Browser.

Viel Erfolg!

[Taney]

Hi,

schau mal auf das erste Auswahlfeld bei http://www.ajaxload.info/.

Danke. Habe es mir angeschaut. Im FF sieht das ganz lustig aus.
Kann man allgemein, Browserübergreifens die Höhe der einzelnen Optionen im Auswahlfeld evtl. einstellen? Hab da leider nirgends etwas gefunden.

Grüße

[dr.colossos]

Hi,

browserübergreifend denk ich nicht. Probieren geht ueber studieren, teste einfach mal height, margin, padding oder gar Zeilenumbrueche im option-tag, oder was dir noch so einfaellt.

Ich hab sogar oben unrecht gehabt, Opera kann das mit den Grafiken naemlich auch nicht.

[Willi]

Hallo,

Würde zwar gerne auch Icons oder kleine Bildchen in die Auswahlliste einfügen, geht aber mit den meißten Browsern wohl nicht.

Ich habe mal in ein ACP eine Dropdownliste eingebaut, in der eine Grafik ausgewählt werden konnte. Ich weiß nicht, ob die Lösung browserübergreifend funktioniert (nur im FF getestet), aber ich kann dir gerne den Quellcode geben:

  
   <label for="catimg">  
    Vorschaubild:  
    <select name="catimg" id="catimg" onchange="updatePreview()" class="picselect">  
      <option value="lastpic" selected="selected">Zuletzt hochgeladenes Bild</option>  
     <optgroup label="Bilder dieser Kategorie">  
      <option value="38" class="picoption" style="background-image:url(assets/uploads/mini_pic_38.jpg);" >Early Morning Mist</option>  
      <option value="36" class="picoption" style="background-image:url(assets/uploads/mini_pic_36.jpg);" >Sunset...</option>  
     </optgroup>  
    </select>  
   </label>  

Und der dazugehörige CSS-Code:

  
.picoption {  
  background-repeat:no-repeat;  
  background-position: left;  
  height: 32px;  
  text-align: right;  
  padding-left: 30px;  
}  
#previewimage { float: right; }  
.picselect {  
  height: 20px;  
}  

Das Ergebnis war dann, dass links die Bilder (Maße: 30×x Pixel) angezeigt wurden und rechtsbündig der entsprechende Text. Wurde ein Eintrag ausgewählt, stand der Text in dem Select-Element ganz normal linksbündig da, ohne Bild.

Schöne Grüße,
Willi