Dropdown anpassen

[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