Styled select-list

[Tronjer]

Mal eine Frage an die Cracks. Ich muss hier einige Select-Listen umstylen. Da sich der vom Browser vorgegebene Dropdown-Pfeil nicht ausblenden lässt, schiebe ich ihn aus dem sichtbaren Bereich und verstecke ihn per overflow:hidden auf dem Parent. Das sieht so aus:

http://goo.gl/eLy1hf

Problem ist, dass beim Aufklappen der Liste die Option-Felder dann zu lang sind, und das sieht unschön aus. Hätte jemand einen Tipp, wie man das sonst noch lösen könnte? Semantisch muss es allerdings eine Select-List bleiben. UL faken geht bei der Aufgabe nicht.

 

[threadi]

select-Elemente kann man leider auch in der heutigen Zeit nur schwer stylen. Es gibt verschiedene JavaScripts, die solche Felder durch ein eigenes HTML-Gerüst ersetzen und die Funktionalitäten übernehmen. Das kann man das quasi frei stylen. Schau dich mal nach jQuery select style um.

Nachtrag: mit solchen Scripts faked man die Felder nicht. Im HTML-Code steht weiterhin <select>, nur im Browser kommt etwas anderes an. Ohne solche Hilfsmittel wirst Du das nicht sauber browserübergreifend hinbekommen.

 

[Banana_Jones]

Für FF und Chrome lässt sich der Pfeil mit

-webkit-appearance: none;
-moz-appearance: none;

verstecken, für IE >= 10 hilft

select::-ms-expand {
    display: none;
}

Willst du IE9 auch noch unterstützen, wirst du um deine bisherige Variante mit der "zu großen" Box nicht umhinkommen.

Von der von @threadi angesprochenen JS-Replacement-Variante würde ich hingegen abraten. Erstens habe ich festgestellt, dass diese je nach verwendetem Skript nicht zuverlässig change-Events des Selectfeldes auslösen, zweitens sind diese für die Usability im mobilen Bereich eine Katastrophe. Dort sind die nativen Auswahlmenüs der Browser um Längen besser, besonders was lange Listen angeht.

 

[Tronjer]

Ich muss sogar den IE8 unterstützen, und natürlich soll es auch auf mobile Devices funktionieren. Die Dokumentstruktur samt XHTML-Doctype ist vorgegeben. Um das Ganze noch zu toppen, liegt auf den <select> Tags ein JS onchange() Event, welches das Name-Attribut ändert, was wiederum beim Absenden der Formulars benötigt wird. Wenn ich das jetzt umstricke, müssten Anpassungen im Backend gemacht werden. Die Aufgabe ist wirklich eine ziemlich harte Nuss. ;)

@Banana_Jones
Bist du sicher, was die von dir angesprochene Problematik mit JS-Replacements betrifft? Ansonsten wäre Threadis Vorschlag einer Überlegung wert. Aber wenn es nachher nicht funktioniert, kann ich mir die Arbeit sparen, ein solches Plugin an mein Styling anzupassen.

 

[Banana_Jones]

@Banana_Jones
Bist du sicher, was die von dir angesprochene Problematik mit JS-Replacements betrifft? Ansonsten wäre Threadis Vorschlag einer Überlegung wert. Aber wenn es nachher nicht funktioniert, kann ich mir die Arbeit sparen, ein solches Plugin an mein Styling anzupassen.

Nein, zu 100% sicher bin ich mir nicht, ich habe aber schon Skripts erlebt, bei denen das eben so war. Ebenso hat es mit anderen funktioniert. Zuletzt habe ich dieses (http://silviomoreto.github.io/bootstrap-select/) eingesetzt, dort war aber ein change-Event keine Anforderung. An deiner Stelle würde ich zuerst einmal überprüfen, ob der Event sauber abgesetzt wird, bevor du mit dem Styling anfängst.