Wie passt man ein "Select"-HTML-Formular-Element mit CSS 3 an?

Question

Ich kann die Größe eines ausgewählten HTML-Formular-Elements nicht ändern, ohne hässliche Ergebnisse zu erhalten, die je nach Browser völlig unterschiedlich sind.

Kennen Sie eine Methode wie die von 37 Signals (leider nur für Webkit) : http://37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit

Oder irgendeine Methode / Umgehung, die in FF/Safari/Chrome (und vielleicht IE ;-) funktioniert?

Ich erstelle ein Formular mit großen Elementen: Es ist einfach, große Schaltflächen oder input[text] zu haben, aber bisher unmöglich, das Gleiche mit select zu tun.

Danke!

Answer 1

Dies ist leider immer noch nicht zuverlässig über alle Browser und Betriebssysteme hinweg möglich. Der richtige Weg ist eine javascriptbasierte Lösung, die ein Auswahlfeld emuliert.

Answer 2

Sie können Ihr Auswahlfeld mit diesem jQuery gestalten:

http://www.adamcoulombe.info/lab/jquery/select-box/

Sie ist einfach zu implementieren und lässt sich in Browsern, die sie nicht unterstützen (IE6), problemlos auf die Standardauswahl zurücksetzen.

jQuery-Plugin (im Download-Link enthalten):

customSelect.jquery.js

Javascript:

$(document).ready(function(){
    $('select').customStyle();
});

CSS:

.customStyleSelectBox {
/* Styles For Your Select Box */
}

.customStyleSelectBox.changed {
/* You can use this if you want a different style after user has made a selection */
}

/* on the next line we add a down arrow on the right to indicate that it is a select box */
.customStyleSelectBoxInner {
background:url(canvas-list-nav-item-arrow-.gif) no-repeat center right;
}

Bildvorschau:

Answer 3

Leider enthält CSS3 keine zusätzlichen Funktionen für das Styling <select> Boxen. Außerdem führt jeder Versuch, sie mit CSS zu gestalten, zu einem browserübergreifenden Chop-Suey-Durcheinander.

Der richtige Weg wäre Javascript/jQuery, hier ist eine jQuery-Version die ich in der Vergangenheit verwendet habe. Wenn ein Benutzer Javascript ausgeschaltet hat, wird es einfach auf eine normale <select> Element.

Fühlen Sie sich frei, sich nach einer Lösung umzusehen, die Ihren Bedürfnissen entspricht. Möglicherweise benötigen Sie eine Vanilla-Javascript-Lösung, wenn Sie nicht bereits jQuery verwenden.

Answer 4

Um den Auswahlpfeil auszublenden, können Sie diesen Workaround verwenden

select {
    overflow:hidden;
    width: 120%;
}