hawkmaster1: Listbox mit Bilder

Beitrag lesen

Hallo Matthias,

ich wollte nur kurz Feedback geben. Aus Interesse habe ich es doch nochmals mit meinem "alten" <select> ausprobiert. Ich habe jetzt diese CSS genommen:

[name="sel_mylistbox"] option.ItemColor::before { content:url("image/color32.png"); }
[name="sel_mylistbox"] option.ItemBlackWhite::before { content:url("image/black32.png"); }

Im dynamisch aufgebauten select habe ich dann halt die jeweilige Klasse mit angegeben. Das funktioniert eigentlich ganz gut. Was man jetzt noch optimieren müsste ist die Schriftformatiertung. Denn das Bild ist 32px groß und die Option Bezeichnung halt nur 12px bzw. je nachdem. Ich hätte auch zudem noch gerne eine kleine Zusatzbezeichnung wie "Lokation" also etwa:

Eintrag1

Zusatzbeschreibung 1 Die Option Text Bezeichnung sollte also Fett und Mittig sein und die Zusatzbezeichnung darunter. Darf man eigentlich innerhalb des Seelct Option auch mit <span> oder dergleichen arbeiten? Ich habe auch überlegt ob man vielleicht mit HTML5 und "data-description" das hinbekommen könnte. Etwa so:

.Color:after {
content: attr(data-description);
}

Das geht aber die Bezeichnung steht jetzt noch nicht unterhalb.

Grüsse hawk