Ein select-Menü in Contao stylen

Almut M. Logo
T. Gorenflo

"Unsere Zufriedenheit spiegelt sich auch darin wieder, dass wir schon die zweite Website von Frau Müller realisieren lassen.
Auch außerhalb unseres Geschäftsinteresses kann ich Frau Müller guten Gewissens empfehlen."

Tim Gorenflo, Altenhilfezentrum St. Laurentius

2013-10-07 von Almut

<select> Menü Design in Contao mit CSS anpassen

Heute zeige ich, wie man in Contao einen Standard <select>-Button mit einem eigenen Design und nur mit CSS aufpeppen kann.

standard select
Standard-Select-Menü im Firefox
custom select
Angepasstes select-Menü

Grösse, Farbe und vor allem die Pfeilgrafik könnt Ihr mit CSS selbst stylen.

Das Prinzip

Die Standardversion des <select>-Menüs wird in zwei div-Container gepackt.
Der eine versteckt den Teil mit dem Standard-Pfeil. In meinem Beispiel hat er die Klasse "dd-container". Der andere zeigt das neue, angepasste Design. Er hat die Klasse "dd-box".

prinzip
Das Konzept

Anleitung

1. Template anpassen

Um die zusätzlichen div-Tags um das eigentliche select-Tag herum einzubauen, geht man im Contao Backend auf
Backend-Module > Templates > Neues Template und wählt das "form_widget.html5" (bzw. das "form_widget.xhtml", wenn die Seite noch mit XHTML läuft).

Dann das Template öffnen und die zwei zusätzlichen <div>-tags mit den Klassen "dd-container" und "dd-box" einbauen. In meinem Beispiel verwende ich ein tabellenloses Formular: Der farbig unterlegte Teil im Bild unten zeigt die Stelle, wo die zwei div-Tags um den PHP Code herum eingebaut werden müssen.

Template nachher
Das angepasste Template "form_widget.html" enthält zwei zusätzliche div-Tags

2. Andere Elemente ausnehmen

Um zu verhindern, dass auch andere Formularelemente (wie z. Bsp. Textfeld und Textarea) von den zusätzlichen divs im Template und deren Klassen angesprochen werden, muss um jedes Select-Formularfeld im Formulargenerator ein weiteres div-tag "gespannt" werden. Diesem div habe ich in meinem Beispiel die Klasse "dd-only" gegeben.

Das sieht dann im ensprechenden Formular so aus:

formulargenerator
Ein div-Tag um alle select-Felder des Formulars anlegen.

3. Die CSS

Nachdem nun die "Behelfs-div-Tags" eingebaut sind, geht's ans Stylesheets schreiben.

Das Grundstylesheet
, um den Standard-Dropdown-Pfeil "abzuschneiden" und den Standardhintergrund auszublenden, sieht so aus:

.dd-only .dd-container select {
    background-color: rgba(0, 0, 0, 0); /* macht eigenen Pfeil sichtbar */
    border: 0 none;
    cursor: pointer;
    width: 250px;
}

.dd-only .dd-box {
    background: url("schicker-pfeil.png") no-repeat scroll right center #99CCCC;
    overflow: hidden;
    width: 220px; /* sollte kleiner sein, als der width-Wert oben */
}

Der Rest ist CSS nach Geschmack.

Mein komplettes CSS für das select im Beispiel sieht so aus:
Die Schrift "pragmatica-web-1" gibt's bei typekit.

.dd-only .dd-container {
    display: block;
    margin: 10px;
    position: relative;
    width: 250px;
}

.dd-container select {
    background-color: rgba(0, 0, 0, 0);
    border: 0 none;
    color: #444444;
    cursor: pointer;
    font: 14px "pragmatica-web-1";
    height: 44px;
    margin: 0;
    padding: 12px 0 0 8px;
    text-shadow: 1px 1px 1px #B7F4F4;
    text-transform: uppercase;
    width: 250px;
}

.dd-only .dd-box {
    background: url("select-down.png") no-repeat scroll right center #99CCCC;
    border-radius: 2px 2px 2px 2px;
    display: inline-block;
    height: 44px;
    overflow: hidden;
    width: 220px;
}

/* Extra Anpassung für Safari */
.safari .dd-only .dd-container select {
    margin: 11px 0 0 10px;
    text-transform: uppercase;
}

/* Extra Anpassung für Chrome */
.chrome .dd-only .dd-container select {
    margin: -5px 0 0 10px;
    text-transform: uppercase;
}

Viel Spass beim select-Box stylen.

In modernen Browsern funktioniert das. In älteren bleibt das Formular zumindest bedienbar.

Den Artikel, der mich auf diese Lösung gebracht hat, findet Ihr hier (in Englisch).
Und hier gibt's noch einen Workaround zu einem Bug, der evtl. im FF im Zusammenhang mit -moz-appearance:none; auftritt.

webdesigner delft

Über die Autorin
Almut arbeitet seit über 15 Jahren als freie Webdesignerin und Grafikerin und entwickelt Websites für kleine bis mittelständische Firmen - für die Mehrheit Ihrer Kunden seit vielen Jahren. Die meisten Websites realisiert sie mit dem CMS Contao. Sie liebt MOOCs, grünen Tee und radfahren und hat am 10. Januar 2015 beschlossen, sich mit der command line endgültig anzufreunden.

Wenn Dir der Beitrag weitergeholfen hat, freue ich mich sehr, wenn Du ihn in Deinem Lieblings-Socialnetwork teilst.

« Suchen & Ersetzen in MySQL Datenbank in mehreren Tabellen A/B-Testing mit Google Analytics »