tag:forum.selfhtml.org,2005:/self Listbox mit Bilder – SELFHTML-Forum 2016-03-29T09:00:59Z https://forum.selfhtml.org/self/2016/mar/23/listbox-mit-bilder/1663803#m1663803 hawkmaster1 2016-03-23T13:11:00Z 2016-03-23T13:11:00Z Listbox mit Bilder <p>Hallo zusammen,</p> <p>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:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-select<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p>Auf Selfhtml habe ich diesen Artikel gefunden. <a href="http://aktuell.de.selfhtml.org/artikel/css/optionbilder/" rel="nofollow noopener noreferrer">Linkbeschreibung</a></p> <p>Hier wird ja mit CSS und content before gearbeitet.</p> <pre><code class="block language-css"><span class="token selector">option[value=deutschland]:before</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"de.gif"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">option[value=irland]:before</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"ie.gif"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>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.</p> <p>vielen Dank</p> <p>Gruss hawk</p> https://forum.selfhtml.org/self/2016/mar/23/listbox-mit-bilder/1663809#m1663809 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2016-03-23T13:48:32Z 2016-03-23T13:48:32Z Listbox mit Bilder <p>Hallo hawkmaster1,</p> <blockquote> <pre><code class="block language-css"><span class="token selector">option[value=deutschland]:before</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"de.gif"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">option[value=irland]:before</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"ie.gif"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>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.</p> </blockquote> <p>Du meinst sowas?</p> <pre><code class="block language-css"><span class="token selector">option::before</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"bild.gif"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">option.class::before</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"anderes_bild.gif"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Klar, warum sollte das nicht gehen? Wenn es sich immer abwsechseln soll, auch</p> <pre><code class="block language-css"><span class="token selector">option::before</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"bild.gif"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">option:nth-child(even)::before</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"anderes_bild.gif"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Wenn eine Idee nicht zuerst absurd erscheint, taugt sie nichts. (Albert Einstein) </div> https://forum.selfhtml.org/self/2016/mar/23/listbox-mit-bilder/1663819#m1663819 MudGuard http://www.andreas-waechter.de/ 2016-03-23T14:38:58Z 2016-03-23T14:38:58Z Listbox mit Bilder <p>Hi,</p> <blockquote> <p>Auf Selfhtml habe ich diesen Artikel gefunden. <a href="http://aktuell.de.selfhtml.org/artikel/css/optionbilder/" rel="nofollow noopener noreferrer">Linkbeschreibung</a></p> </blockquote> <p>unter einer dicken Staubschicht ...</p> <blockquote> <p>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?</p> </blockquote> <p>Du kannst jeden beliebigen Selector benutzen, der die gewünschten Option-Elemente auswählt.</p> <blockquote> <p>Ich bräuchte eigenlich nur zwei verschiedene Bilder.</p> </blockquote> <p>Dann brauchst Du nur zwei rulesets, eins für jedes Bild. Mit jeweils geeignetem Selektor.</p> <p>cu,<br> Andreas a/k/a MudGuard</p> https://forum.selfhtml.org/self/2016/mar/23/listbox-mit-bilder/1663811#m1663811 hawkmaster1 2016-03-23T14:06:37Z 2016-03-23T14:06:37Z Listbox mit Bilder <p>Hallo Matthias,</p> <p>vielen Dank für deine Hilfe.</p> <p>Ausgehend von dieser Listbox:</p> <pre><code class="block language-html">select name="my-listbox" size="10"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>8<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> </code></pre> <p>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.</p> <p>viele Grüße hawk</p> https://forum.selfhtml.org/self/2016/mar/23/listbox-mit-bilder/1663814#m1663814 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2016-03-23T14:23:29Z 2016-03-23T14:23:29Z Listbox mit Bilder <p>Hallo hawkmaster1,</p> <blockquote> <p>Ausgehend von dieser Listbox:</p> <pre><code class="block language-html">select name="my-listbox" size="10"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>8<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> </code></pre> <p>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.</p> </blockquote> <p>Ja, wenn es nicht strukturell begründbar ist, könntest du eine Klasse mitgeben.</p> <blockquote> <p>Ein weiteres Problem ist auch noch das ich ja mehrere Selects auf dem Form habe und nur eines mit Bilder funktionieren soll.</p> </blockquote> <p>Den Nachfahrenselektor kennst du?</p> <pre><code class="block language-css"><span class="token selector">[name="my-listbox"] option::before</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">''</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>ggf. kann das entsprechende Select-Element auch ein Klasse bekommen.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Wenn eine Idee nicht zuerst absurd erscheint, taugt sie nichts. (Albert Einstein) </div> https://forum.selfhtml.org/self/2016/mar/23/listbox-mit-bilder/1663887#m1663887 hawkmaster1 2016-03-24T10:39:16Z 2016-03-24T10:39:16Z Listbox mit Bilder <p>Hallo Matthias,</p> <p>ich wollte nur kurz Feedback geben. Aus Interesse habe ich es doch nochmals mit meinem "alten" <select> ausprobiert. Ich habe jetzt diese CSS genommen:</p> <pre><code class="block language-css"><span class="token selector">[name="sel_mylistbox"] option.ItemColor::before</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"image/color32.png"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">[name="sel_mylistbox"] option.ItemBlackWhite::before</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"image/black32.png"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>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:</p> <p><strong>Eintrag1</strong></p> <p>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:</p> <pre><code class="block language-css"><span class="token selector">.Color:after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">attr</span><span class="token punctuation">(</span>data-description<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Das geht aber die Bezeichnung steht jetzt noch nicht unterhalb.</p> <p>Grüsse hawk</p> https://forum.selfhtml.org/self/2016/mar/23/listbox-mit-bilder/1663821#m1663821 hawkmaster1 2016-03-23T15:07:06Z 2016-03-23T15:07:06Z Listbox mit Bilder <p>Hi Andreas,</p> <blockquote> <p>unter einer dicken Staubschicht ...</p> </blockquote> <p>ja was tut man nicht alles in der Not :-)</p> <p>Mir wäre auch eine "modernere" Lösung lieber. Jetzt habe ich mal anstatt eines <select> das Ganze mit einem Scrollbaren Div gemacht.</p> <p>Hier konnte ich dann den Inhalt anders gestalten und auch Bilder einfügen. Und dann habe ich das jquery ScrollTo Plugin genommen.</p> <p><a href="http://lions-mark.com/jquery/scrollTo/" rel="nofollow noopener noreferrer">Linkbeschreibung</a></p> <p>Das sieht schon mal nicht schlecht aus. Das hinscrollen funktioniert. Nur habe ich noch Probleme mit dem OffsetTop. Das will noch nicht richtig.</p> <p>mal sehen...</p> <p>viele Grüße hawk</p> https://forum.selfhtml.org/self/2016/mar/23/listbox-mit-bilder/1663822#m1663822 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2016-03-23T15:20:03Z 2016-03-23T15:20:03Z Listbox mit Bilder <p>Hallo hawkmaster1,</p> <blockquote> <p>Mir wäre auch eine "modernere" Lösung lieber.</p> </blockquote> <p>Was ist denn daran nicht modern? Was möchtest du eigentlich erreichen?</p> <blockquote> <p>Jetzt habe ich mal anstatt eines <select> das Ganze mit einem Scrollbaren Div gemacht.</p> </blockquote> <p>Ist <code>select</code> das <em>richtige</em> Element? Falls ja, nimm ein select-Element …</p> <blockquote> <p>Hier konnte ich dann den Inhalt anders gestalten und auch Bilder einfügen. Und dann habe ich das jquery ScrollTo Plugin genommen.</p> </blockquote> <p>… und versuche nicht, irgendeine Funktionalität nachzubauen.</p> <blockquote> <p>Das sieht schon mal nicht schlecht aus. Das hinscrollen funktioniert. Nur habe ich noch Probleme mit dem OffsetTop. Das will noch nicht richtig.</p> </blockquote> <p>Ist <code>select</code> das <em>richtige</em> Element? Falls ja, nimm ein select-Element und versuche nicht, irgendeine Funktionalität nachzubauen.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Wenn eine Idee nicht zuerst absurd erscheint, taugt sie nichts. (Albert Einstein) </div> https://forum.selfhtml.org/self/2016/mar/23/listbox-mit-bilder/1663829#m1663829 hawkmaster1 2016-03-23T16:03:24Z 2016-03-23T16:03:24Z Listbox mit Bilder <p>Hallo Matthias,</p> <blockquote> <p>Ist <code>select</code> das <em>richtige</em> Element? Falls ja, nimm ein select-Element …</p> </blockquote> <p>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.</p> <p>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.</p> <p>viele Grüße hawk</p> https://forum.selfhtml.org/self/2016/mar/23/listbox-mit-bilder/1663833#m1663833 Der Martin 2016-03-23T16:18:59Z 2016-03-23T16:49:28Z Listbox mit Bilder <p>Hallo,</p> <blockquote> <blockquote> <p>Ist <code>select</code> das <em>richtige</em> Element? Falls ja, nimm ein select-Element …</p> </blockquote> <p>Du kennst das doch sicher auch, das es für vieles mehrere Lösungen gibt.</p> </blockquote> <p>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.</p> <blockquote> <p>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.</p> </blockquote> <p>Warum mit Javascript? Das sollte IMO schon serverseitig passieren, indem das ausgewählte option-Element dann eben das Attribut "selected" bekommt.</p> <blockquote> <p>Es geht darum die Optik und das Aussehen etwas zu erneuern.</p> </blockquote> <p>Dafür gibt es ja CSS.</p> <blockquote> <p>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.</p> <p>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.</p> </blockquote> <p>Du baust also die <strong>Funktionalität</strong> 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.</p> <p>Ich würde das select-Element aber nicht mit einem aussagefreien div und ein paar untergeordneten Boxen nachbauen, sondern mit der Struktur</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Beschreibung<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Beschreibung<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Beschreibung<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> ... <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> </code></pre> <p>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.</p> <p>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.</p> <p>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:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list001-opt004<span class="token punctuation">"</span></span> <span class="token attr-name">...</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list001-opt004<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Beschreibung<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> </code></pre> <p>So kann man das label-Element mit</p> <pre><code class="block language-css"><span class="token selector">input + label</span> <span class="token punctuation">{</span> ...<span class="token punctuation">}</span> <span class="token selector">input:checked + label</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span> </code></pre> <p>sowohl generisch als auch speziell im ausgewählten Zustand stylen.</p> <p>So long,<br>  Martin</p> https://forum.selfhtml.org/self/2016/mar/23/listbox-mit-bilder/1663842#m1663842 hawkmaster1 2016-03-24T07:14:54Z 2016-03-24T07:14:54Z Listbox mit Bilder <p>Hallo Martin,</p> <p>herzlichen Dank für deine ausführliche Hilfe.</p> <p>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.</p> <p>viele Grüße hawk</p> https://forum.selfhtml.org/self/2016/mar/23/listbox-mit-bilder/1663849#m1663849 Christian Kruse https://wwwtech.de/about 2016-03-24T07:57:52Z 2016-03-24T07:57:52Z Listbox mit Bilder <p>Hallo hawkmaster1,</p> <blockquote> <p>Ja ich habe es nur so versucht weil halt das Select Element immer noch schwer zum stylen ist.</p> </blockquote> <p>Kennst du <a href="https://select2.github.io/" rel="nofollow noopener noreferrer">select2</a> und <a href="http://harvesthq.github.io/chosen/" rel="nofollow noopener noreferrer">chosen</a>?</p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> https://forum.selfhtml.org/self/2016/mar/23/listbox-mit-bilder/1663851#m1663851 Der Martin 2016-03-24T08:27:16Z 2016-03-24T08:27:16Z Listbox mit Bilder <p>Moin,</p> <blockquote> <p>Ja ich habe es nur so versucht weil halt das Select Element immer noch schwer zum stylen ist.</p> </blockquote> <p>ja, gerade dieses Element ist recht störrisch.</p> <blockquote> <p>Und; ich habe es fast so umgesetzt wie du es beschreibst. :-)<br> Allerdings habe ich eine normale Datentabelle <table> genommen und in einer Spalte dann auch jeweils ein Radio mit display:none.</p> </blockquote> <p>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.</p> <blockquote> <p>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.</p> </blockquote> <p>Ich verstehe immer noch nicht, wie du das hier genau meinst.</p> <blockquote> <p>Jetzt mit einem scrollbaren Div bzw. Tabelle muss man etwas mehr Aufwand betreiben und zusätzlich den Eintrag per JS markieren, hervorheben und hinscrollen.</p> </blockquote> <p>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.</p> <p>Und um das Hervorheben musst du dich eigentlich nicht kümmern, das geht (eine günstige Markup-Struktur vorausgesetzt) mit CSS.<br> 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.</p> <p>So long,<br>  Martin</p> https://forum.selfhtml.org/self/2016/mar/23/listbox-mit-bilder/1663890#m1663890 Der Martin 2016-03-24T10:53:11Z 2016-03-24T10:53:11Z Listbox mit Bilder <p>Hi,</p> <blockquote> <p>Was man jetzt noch optimieren müsste ist die Schriftformatiertung.</p> </blockquote> <p>das dürfte ja kein Problem sein. Schriftart und Schriftgröße kann man beim option-Element AFAIK recht frei bestimmen.</p> <blockquote> <p>Darf man eigentlich innerhalb des Seelct Option auch mit <span> oder dergleichen arbeiten?</p> </blockquote> <p>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.</p> <blockquote> <pre><code class="block language-css"><span class="token selector">.Color:after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">attr</span><span class="token punctuation">(</span>data-description<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Das geht aber die Bezeichnung steht jetzt noch nicht unterhalb.</p> </blockquote> <p>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.</p> <p>Ciao,<br>  Martin</p> https://forum.selfhtml.org/self/2016/mar/23/listbox-mit-bilder/1663896#m1663896 hawkmaster1 2016-03-24T12:08:42Z 2016-03-24T12:08:42Z Listbox mit Bilder <p>Hi Martin,</p> <p>danke dir.</p> <blockquote> <p>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.</p> </blockquote> <p>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)</p> <p><a href="http://designwithpc.com/Plugins/ddSlick#demo" rel="nofollow noopener noreferrer">Linkbeschreibung</a></p> <p>Gruss hawk</p> https://forum.selfhtml.org/self/2016/mar/23/listbox-mit-bilder/1664314#m1664314 hawkmaster1 2016-03-29T08:47:29Z 2016-03-29T08:47:29Z Listbox mit Bilder <p>Hallo Martin,</p> <p>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.</p> <p><a href="http://aktuell.de.selfhtml.org/artikel/css/optionbilder/beispiel.htm" rel="nofollow noopener noreferrer">Linkbeschreibung</a></p> <p>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)</p> <p>Beispiel:</p> <pre><code> Irland Beschreibung zu Irland Deutschland Beschreibung zu Deutschland </code></pre> <p>viele Grüße hawk</p> https://forum.selfhtml.org/self/2016/mar/23/listbox-mit-bilder/1664317#m1664317 Der Martin 2016-03-29T09:00:59Z 2016-03-29T09:00:59Z Listbox mit Bilder <p>Hi,</p> <blockquote> <p><a href="http://aktuell.de.selfhtml.org/artikel/css/optionbilder/beispiel.htm" rel="nofollow noopener noreferrer">http://aktuell.de.selfhtml.org/artikel/css/optionbilder/beispiel.htm</a></p> <p>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)</p> </blockquote> <p>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.</p> <p>Und um nochmal daran zu erinnern: Einige Browser wenden CSS-Formatierungen auf select- und option-Elemente nur sehr eingeschränkt an.</p> <p>So long,<br>  Martin</p>