tag:forum.selfhtml.org,2005:/selfListbox mit Bilder – SELFHTML-Forum2016-03-29T09:00:59Zhttps://forum.selfhtml.org/self/2016/mar/23/listbox-mit-bilder/1663803#m1663803hawkmaster12016-03-23T13:11:00Z2016-03-23T13:11:00ZListbox 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#m1663809Matthias Apselmatthias.apsel@selfhtml.orghttp://brückentage.info2016-03-23T13:48:32Z2016-03-23T13:48:32ZListbox 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#m1663819MudGuardhttp://www.andreas-waechter.de/2016-03-23T14:38:58Z2016-03-23T14:38:58ZListbox 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#m1663811hawkmaster12016-03-23T14:06:37Z2016-03-23T14:06:37ZListbox 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#m1663814Matthias Apselmatthias.apsel@selfhtml.orghttp://brückentage.info2016-03-23T14:23:29Z2016-03-23T14:23:29ZListbox 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#m1663887hawkmaster12016-03-24T10:39:16Z2016-03-24T10:39:16ZListbox 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#m1663821hawkmaster12016-03-23T15:07:06Z2016-03-23T15:07:06ZListbox 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#m1663822Matthias Apselmatthias.apsel@selfhtml.orghttp://brückentage.info2016-03-23T15:20:03Z2016-03-23T15:20:03ZListbox 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#m1663829hawkmaster12016-03-23T16:03:24Z2016-03-23T16:03:24ZListbox 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#m1663833Der Martin2016-03-23T16:18:59Z2016-03-23T16:49:28ZListbox 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#m1663842hawkmaster12016-03-24T07:14:54Z2016-03-24T07:14:54ZListbox 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#m1663849Christian Krusehttps://wwwtech.de/about2016-03-24T07:57:52Z2016-03-24T07:57:52ZListbox 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#m1663851Der Martin2016-03-24T08:27:16Z2016-03-24T08:27:16ZListbox 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#m1663890Der Martin2016-03-24T10:53:11Z2016-03-24T10:53:11ZListbox 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#m1663896hawkmaster12016-03-24T12:08:42Z2016-03-24T12:08:42ZListbox 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#m1664314hawkmaster12016-03-29T08:47:29Z2016-03-29T08:47:29ZListbox 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#m1664317Der Martin2016-03-29T09:00:59Z2016-03-29T09:00:59ZListbox 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>