2011-01-03 12 views
3

Ich bin auf einem Mac mit Firefox. Ich habe eine Website und die Auswahl Dropdown-Box hat eine lustige Art:Wie style select drop down?

alt text

Wenn ich auf anderen Websites im gleichen Browser sehe sie anders aussehen:

alt text

Oder sogar an meinem Code hier: jsFiddle

Was könnte möglicherweise verursachen meine Website zu zeigen, wie es ist, weil, wie ich es verstehe, Sie sehr wenig Kontrolle über die Auswahl Boxen haben angezeigt?

Dank

+0

Dieser Code wird im unteren Beispiel in meiner Kopie von Fx/Mac angezeigt. Die Erklärung ist fast sicher etwas mit Ihrer Website zu tun. – Quentin

Antwort

4

Stehen Sie mit CSS <select> zu formatieren? Oder ein CSS-Reset? Wenn Sie einige Regeln wie border oder background verwenden, verschwindet der Standardstil und Sie erhalten diese graue Box. Sie sollten diese CSS-Einstellungen entfernen.

+0

Ausgezeichnete Antwort. Ich habe die Eigenschaft border gefunden, die das select-Element auf einem separaten Stylesheet zum Haupt-Stylesheet formatiert. Vielen Dank! – Anthony

1

Die Standard-Dropdown-Stile variieren zwischen Browsern. Leider gibt es keine echte CSS-Methode, um sie neu zu gestalten.

Das heißt, Sie könnten ein jQuery-Plugin wie dieses verwenden: Custom Select Box, die ich in der Vergangenheit mit gutem Erfolg verwendet habe.

1

Das zweite Beispiel wird mit der Systempräsentation von select angezeigt. Die erste sieht nicht wie eine Systemauswahl aus, weil wahrscheinlich ein benutzerdefinierter Stil angewendet wurde, der nicht mehr als nur die Systempräsentation zurücksetzt.

Es ist im Allgemeinen nicht möglich, HTML-Eingabefelder anders als Textfelder zu formatieren. Um dies zu erreichen, implementieren Entwickler normalerweise Eingabesteuerelemente mit komplexem HTML neu. Dies wird von Ian Devlin vorgeschlagen.