Listbox mit Bilder

[hawkmaster1]

Hallo zusammen,

Ich bräuchte eine Listbox mit Bildern. Alle jquery Plugins und andere Lösungen die ich gefunden habe, funktionieren nur mit "normalen" selects, also ohne "size=". Ich brauche aber keine Dropdown Liste sondern eine Listbox wie:

<select  name="my-select" size="10">

Auf Selfhtml habe ich diesen Artikel gefunden. Linkbeschreibung

Hier wird ja mit CSS und content before gearbeitet.

option[value=deutschland]:before { content:url("de.gif"); }
option[value=irland]:before { content:url("ie.gif"); }

Mein Select Inhalt wird jedoch dynamisch aus der DB aufgebaut und hat als Values nur IDs. Kann man das vielleicht anstatt dem "option[value" auch mit einem Klassen Namen machen? Ich bräuchte eigenlich nur zwei verschiedene Bilder.

vielen Dank

Gruss hawk

[Matthias Apsel]

Hallo hawkmaster1,

option[value=deutschland]:before { content:url("de.gif"); }
option[value=irland]:before { content:url("ie.gif"); }

Mein Select Inhalt wird jedoch dynamisch aus der DB aufgebaut und hat als Values nur IDs. Kann man das vielleicht anstatt dem "option[value" auch mit einem Klassen Namen machen? Ich bräuchte eigenlich nur zwei verschiedene Bilder.

Du meinst sowas?

option::before       { content:url("bild.gif"); }
option.class::before { content:url("anderes_bild.gif"); }

Klar, warum sollte das nicht gehen? Wenn es sich immer abwsechseln soll, auch

option::before                 { content:url("bild.gif"); }
option:nth-child(even)::before { content:url("anderes_bild.gif"); }

Bis demnächst
Matthias

[hawkmaster1]

Hallo Matthias,

vielen Dank für deine Hilfe.

Ausgehend von dieser Listbox:

select  name="my-listbox" size="10">
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="8">8</option>
</select>

Jetzt sollte z.b. die Value 2,3 und 8 ein Bild "bild1.jpg" bekommen und value 4 und 5 ein Bild "bild2.jpg". Ich könnte ja beim dynamischen Aufbau des Select auch noch einen Klassennamen oder dergleichen mit angeben. Ein weiteres Problem ist auch noch das ich ja mehrere Selects auf dem Form habe und nur eines mit Bilder funktionieren soll.

viele Grüße hawk

[Matthias Apsel]

Hallo hawkmaster1,

Ausgehend von dieser Listbox:

select  name="my-listbox" size="10">
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="8">8</option>
</select>

Jetzt sollte z.b. die Value 2,3 und 8 ein Bild "bild1.jpg" bekommen und value 4 und 5 ein Bild "bild2.jpg". Ich könnte ja beim dynamischen Aufbau des Select auch noch einen Klassennamen oder dergleichen mit angeben.

Ja, wenn es nicht strukturell begründbar ist, könntest du eine Klasse mitgeben.

Ein weiteres Problem ist auch noch das ich ja mehrere Selects auf dem Form habe und nur eines mit Bilder funktionieren soll.

Den Nachfahrenselektor kennst du?

[name="my-listbox"] option::before { content: url(''); }

ggf. kann das entsprechende Select-Element auch ein Klasse bekommen.

Bis demnächst
Matthias

[hawkmaster1]

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

[Der Martin]

Hi,

Was man jetzt noch optimieren müsste ist die Schriftformatiertung.

das dürfte ja kein Problem sein. Schriftart und Schriftgröße kann man beim option-Element AFAIK recht frei bestimmen.

Darf man eigentlich innerhalb des Seelct Option auch mit <span> oder dergleichen arbeiten?

Nein, der Inhalt des option-Element ist "text only", kein HTML, so wie bei den meisten Attributwerten auch. Aber ein Zeilenumbruch \n könnte gehen. Ich habe aber die Befürchtung, dass die Darstellung dann je nach Browser unterschiedlich aussieht, ähnlich wie beim Tooltip per title-Attribut.

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

Das geht aber die Bezeichnung steht jetzt noch nicht unterhalb.

Zwei Ideen dazu: Entweder lass den Attributwert, den du anzeigen willst, mit einem Zeilenumbruch \n beginnen, oder formatiere das :after-Pseudoelement als display:block. Wobei letzteres IMO eleganter ist.

Ciao,
 Martin

[hawkmaster1]

Hi Martin,

danke dir.

Zwei Ideen dazu: Entweder lass den Attributwert, den du anzeigen willst, mit einem Zeilenumbruch \n beginnen, oder formatiere das :after-Pseudoelement als display:block. Wobei letzteres IMO eleganter ist.

das probiere ich mal aus. Hier noch ein Beispiel. Die machen das wohl auch so ähnlich mit "data-description". (habe nur noch nicht herausgefunden wie die den Umbruch machen und die Textformatierung)

Linkbeschreibung

Gruss hawk

[hawkmaster1]

Hallo Martin,

also ich habe es bisher nicht geschafft den Text im <option> so zu formatieren wie gewünscht, vor allem wenn links davor im Select diese Bilder sind. Wenn man mal als Vorlage das Self Beispiel nimmt.

Linkbeschreibung

Im Prinzip habe ich es bisher so. Wenn man nun aber den Text neben den Bildern mittig möchte oder gar noch eine Zusatzbeschreibung dann wird das sehr schwierig. (zumindest habe ich das bisher nicht hinbekommen)

Beispiel:

        Irland

Beschreibung zu Irland
      Deutschland

Beschreibung zu Deutschland

viele Grüße hawk

[Der Martin]

Hi,

http://aktuell.de.selfhtml.org/artikel/css/optionbilder/beispiel.htm

Im Prinzip habe ich es bisher so. Wenn man nun aber den Text neben den Bildern mittig möchte oder gar noch eine Zusatzbeschreibung dann wird das sehr schwierig. (zumindest habe ich das bisher nicht hinbekommen)

ja, ich sagte ja auch schon, dass das option-Element nur reinen Text enthalten darf. Eine Zentrierung von Teilen des Inhalts ist also nicht möglich, höchstens des gesamten Inhalts.

Und um nochmal daran zu erinnern: Einige Browser wenden CSS-Formatierungen auf select- und option-Elemente nur sehr eingeschränkt an.

So long,
 Martin

[MudGuard]

Hi,

Auf Selfhtml habe ich diesen Artikel gefunden. Linkbeschreibung

unter einer dicken Staubschicht ...

Mein Select Inhalt wird jedoch dynamisch aus der DB aufgebaut und hat als Values nur IDs. Kann man das vielleicht anstatt dem "option[value" auch mit einem Klassen Namen machen?

Du kannst jeden beliebigen Selector benutzen, der die gewünschten Option-Elemente auswählt.

Ich bräuchte eigenlich nur zwei verschiedene Bilder.

Dann brauchst Du nur zwei rulesets, eins für jedes Bild. Mit jeweils geeignetem Selektor.

cu,
Andreas a/k/a MudGuard

[hawkmaster1]

Hi Andreas,

unter einer dicken Staubschicht ...

ja was tut man nicht alles in der Not :-)

Mir wäre auch eine "modernere" Lösung lieber. Jetzt habe ich mal anstatt eines <select> das Ganze mit einem Scrollbaren Div gemacht.

Hier konnte ich dann den Inhalt anders gestalten und auch Bilder einfügen. Und dann habe ich das jquery ScrollTo Plugin genommen.

Linkbeschreibung

Das sieht schon mal nicht schlecht aus. Das hinscrollen funktioniert. Nur habe ich noch Probleme mit dem OffsetTop. Das will noch nicht richtig.

mal sehen...

viele Grüße hawk

[Matthias Apsel]

Hallo hawkmaster1,

Mir wäre auch eine "modernere" Lösung lieber.

Was ist denn daran nicht modern? Was möchtest du eigentlich erreichen?

Jetzt habe ich mal anstatt eines <select> das Ganze mit einem Scrollbaren Div gemacht.

Ist select das richtige Element? Falls ja, nimm ein select-Element …

Hier konnte ich dann den Inhalt anders gestalten und auch Bilder einfügen. Und dann habe ich das jquery ScrollTo Plugin genommen.

… und versuche nicht, irgendeine Funktionalität nachzubauen.

Das sieht schon mal nicht schlecht aus. Das hinscrollen funktioniert. Nur habe ich noch Probleme mit dem OffsetTop. Das will noch nicht richtig.

Ist select das richtige Element? Falls ja, nimm ein select-Element und versuche nicht, irgendeine Funktionalität nachzubauen.

Bis demnächst
Matthias

[hawkmaster1]

Hallo Matthias,

Ist select das richtige Element? Falls ja, nimm ein select-Element …

Du kennst das doch sicher auch, das es für vieles mehrere Lösungen gibt. Mein altes Projekt hatte eine Listbox mit <select size=10> Wenn das Formular submitted wird, ist der selektierte alte Wert wieder mit JS und "document.forms[0].MeinSelect.selectedIndex=pr_index" wieder markiert worden. Das hat jetzt alles mehrere Jahre gut funktioniert und würde auch weiter so gehen. Es geht darum die Optik und das Aussehen etwas zu erneuern. Daher habe ich jetzt versucht eine Auswahlliste zu gestalten mit einem Bild links daneben. Zusätzlich ist die Schrift anders gestaltet und unter dem eigentlichen Eintrag gibt es noch eine Beschreibung. Kurzum, das mit einem Select zu machen scheint mir fast nicht möglich.

Daher habe ich es jetzt mit einem Scrollbaren Div gemacht. Nur geht halt hier nicht mehr das "document.forms[0].MeinSelect.selectedIndex=pr_index" und man muss dies mit einer Scroll Funktion machen.

viele Grüße hawk

[Der Martin]

Hallo,

Ist select das richtige Element? Falls ja, nimm ein select-Element …

Du kennst das doch sicher auch, das es für vieles mehrere Lösungen gibt.

ja, aber meistens ist es dann trotzdem so, dass eine der Lösungen richtig gut geeignet ist, vielleicht auch noch eine zweite, während die anderen zwar auch denkbar, aber weniger günstig sind.

Mein altes Projekt hatte eine Listbox mit <select size=10> Wenn das Formular submitted wird, ist der selektierte alte Wert wieder mit JS und "document.forms[0].MeinSelect.selectedIndex=pr_index" wieder markiert worden.

Warum mit Javascript? Das sollte IMO schon serverseitig passieren, indem das ausgewählte option-Element dann eben das Attribut "selected" bekommt.

Es geht darum die Optik und das Aussehen etwas zu erneuern.

Dafür gibt es ja CSS.

Daher habe ich jetzt versucht eine Auswahlliste zu gestalten mit einem Bild links daneben. Zusätzlich ist die Schrift anders gestaltet und unter dem eigentlichen Eintrag gibt es noch eine Beschreibung. Kurzum, das mit einem Select zu machen scheint mir fast nicht möglich.

Daher habe ich es jetzt mit einem Scrollbaren Div gemacht. Nur geht halt hier nicht mehr das "document.forms[0].MeinSelect.selectedIndex=pr_index" und man muss dies mit einer Scroll Funktion machen.

Du baust also die Funktionalität eines optimal geeigneten Standard-Elements nach, nur um in der visuellen Gestaltung mehr Freiheiten zu haben. Normalerweise würde ich lauthals davon abraten - aber leider ist es tatsächlich so, dass Formularelemente sich teils nur sehr eingeschränkt stylen lassen, so dass der Nachbau manchmal ... ja, fast eine Notwendigkeit ist.

Ich würde das select-Element aber nicht mit einem aussagefreien div und ein paar untergeordneten Boxen nachbauen, sondern mit der Struktur

<fieldset>
 <legend />
 <label><input type="radio">Beschreibung</label>
 <label><input type="radio">Beschreibung</label>
 <label><input type="radio">Beschreibung</label>
 ...
</fieldset>

So bleiben die Dinger von der Semantik her echte Formularelemente, die serverseitige Auswertung bleibt nahezu identisch, und die verwendeten Elemente lassen sich in der Regel recht gut stylen. Man könnte aus optischen Erwägungen sogar die Radiobuttons selbst mit CSS verschwinden lassen (display:none), denn das Konstrukt ist ja durch die klickbaren Labels ebenfalls bedienbar. Sogar per Tastatur.

Die etwas unschöne Verschachtelung von label und input-Element hat den Vorteil, dass man nicht große Rudel von IDs generieren muss, um label und input miteinander zu verheiraten.

Korrektur: Nein, das Verschachteln ist doch keine gute Idee. Damit ist es nämlich nicht möglich, die label-Elemente anhand des checked-Status ihrer Radiobuttons zu stylen, weil es keinen Selektor gibt, der vom Kindelement aufwärts selektiert. Also schreibt man sie doch wieder als Geschwisterelemente nebeneinander:

<input type="radio" id="list001-opt004" ...><label for="list001-opt004">Beschreibung</label>

So kann man das label-Element mit

input + label { ...}
input:checked + label { ... }

sowohl generisch als auch speziell im ausgewählten Zustand stylen.

So long,
 Martin

[hawkmaster1]

Hallo Martin,

herzlichen Dank für deine ausführliche Hilfe.

Ja ich habe es nur so versucht weil halt das Select Element immer noch schwer zum stylen ist. Und; ich habe es fast so umgesetzt wie du es beschreibst. :-) Allerdings habe ich eine normale Datentabelle <table> genommen und in einer Spalte dann auch jeweils ein Radio mit display:none. Es sieht recht gut aus und verhält sich auch nahezu wie das alte <select>. Der große Unterschied ist halt das man vorher mit "selected=selected" sich den Value merken konnte und dieser in der Liste immer richtig markiert war. Jetzt mit einem scrollbaren Div bzw. Tabelle muss man etwas mehr Aufwand betreiben und zusätzlich den Eintrag per JS markieren, hervorheben und hinscrollen.

viele Grüße hawk

[Christian Kruse]

Hallo hawkmaster1,

Ja ich habe es nur so versucht weil halt das Select Element immer noch schwer zum stylen ist.

Kennst du select2 und chosen?

LG,
CK

[Der Martin]

Moin,

Ja ich habe es nur so versucht weil halt das Select Element immer noch schwer zum stylen ist.

ja, gerade dieses Element ist recht störrisch.

Und; ich habe es fast so umgesetzt wie du es beschreibst. :-)
Allerdings habe ich eine normale Datentabelle <table> genommen und in einer Spalte dann auch jeweils ein Radio mit display:none.

Kann man natürlich auch machen; ich nehme an, du verwendest dann in einer zweiten Spalte ebenfalls label-Elemente? Denn ohne die würde dir ein erhebliches Stück Usability verlorengehen: Die sorgen dafür, dass das ganze Konstrukt nicht nur per Maus klickbar, sondern sogar mit der Tastatur ist. Und das sogar ohne Javascript-Unterstützung.

Es sieht recht gut aus und verhält sich auch nahezu wie das alte <select>. Der große Unterschied ist halt das man vorher mit "selected=selected" sich den Value merken konnte und dieser in der Liste immer richtig markiert war.

Ich verstehe immer noch nicht, wie du das hier genau meinst.

Jetzt mit einem scrollbaren Div bzw. Tabelle muss man etwas mehr Aufwand betreiben und zusätzlich den Eintrag per JS markieren, hervorheben und hinscrollen.

Wieso per JS? Wieso nicht direkt serverseitig? Und ob ich jetzt einem option-Element wieder das Attribut "selected" mitgebe, oder einem Radiobutton das Attribut "checked", ist vom Aufwand her eigentlich dasselbe.

Und um das Hervorheben musst du dich eigentlich nicht kümmern, das geht (eine günstige Markup-Struktur vorausgesetzt) mit CSS.
Passend hinscrollen ist allerdings so'n Punkt, ja ... da wird man wohl tatsächlich mit JS nachhelfen müssen. Allerdings ist der Verlust dieses Features für den Fall, dass JS nicht zur Verfügung steht, nichts weiter als ein kosmetisches Manko und somit vertretbar.

So long,
 Martin