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

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".

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.

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:

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.

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