Das Select-Element gehört zum absoluten Standard-Repertoire vor allem im Formulardesign. Mit der Verbreitung mobiler Clients setzt es sich zudem immer mehr als alternative Navigationslösung für kleine Display-Auflösungen durch. Immerhin passt ein Select-Element auch in den kleinsten Viewport. Der Nachteil an der Sache ist, dass das Element nicht sehr ansehnlich ist. So haben sich verschiedene Alternativen entwickelt. Das hier vorgestellte StyledSelect hat den besonderen Charme, dass es etwa vorhandene Select-Elemente nicht ersetzt, so dass ein unproblematischer Fallback in Browsern ohne Javascript gewährleistet bleibt.

Viel Auswahl mit dem Select-Element, aber auch ohne (Bildquelle: jcpoffet / pixelio.de)

StyledSelect: Klassenbasierte Hübschifizierung

Die Anwendung des kleinen Javascripts StyledSelect ist in der einfachsten Variante so simpel wie der Aufruf von:

$('select').styledSelect();

Zusätzlich akzeptiert styledSelect() eine Reihe von optionalen Parametern, die sich im Wesentlichen mit der Behandlung der einzelnen Klassen, über die StyledSelect die Optik steuert, befassen.

1
2
3
4
5
6
7
8
9
10
11
12

{       
        selectClass: 'styledSelect',
        openSelectClass: 'open',
        optionClass: 'option',
        selectedOptionClass: 'selected',
        closedOptionClass: 'closed',
        firstOptionClass: 'first',
        lastOptionClass: 'last',
        zIndexApply: false,
        zIndexStart: 250,
        deactiveOnBackgroundClick: true
}

Um das Standard-Element zu ersetzen, wird nun ein Div-Container mit der Klasse styledSelect versehen. Die einzelnen Auswahlpunkte werden innerhalb einer Liste ul definiert, wobei die Select-Werte dem li-Tag als rel-Attribut beizufügen sind. Das sieht dann so aus:

1
2
3
4
5
6
7
8

 <div class="styledSelect open">
        <ul>
                <li rel="value1" class="option first">Title 1</li>
                <li rel="value2" class="option selected">Title 2</li>
                <li rel="value3" class="option">Title 3</li>
                <li rel="value4" class="option last">Title 4</li>
        </ul>
</div>

StyledSelect ist nicht neu, sondern wird bereits seit einigen Jahren auf Google-Code gehostet. Insofern kann es funktional nicht mit neueren Plugins, wie dem hier vor einiger Zeit vorgestellten ddSlick mithalten. StyledSelect ist jedoch die einzige, mir bekannte, quasi minimal-invasive Lösung, wenn es um die Substitution des Standardelements geht.

Der Entwickler stellt die fortgeschrittenen Möglichkeiten des Plugin auf einer eigenen Demoseite zum Produkt ausführlich vor. StyledSelect ist kostenfrei nutzbar und sollte für den Anwendungsfall mobiler Clients stets in Erwägung gezogen werden.

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit fast 30 Jahren in der IT daheim. Seit 2008 schreibt er für Dr. Web, seit 2012 ist er Chefredakteur des Magazins. Man findet ihn auch auf Twitter und Facebook, aktiver ist er allerdings auf Google+.

• Web
|
• Twitter
|
• Facebook
|
• Google+
|
• More Posts (448)