2013-12-09 45 views
29

Kennt jemand eine Möglichkeit, ein HTML-Select-Element so zu gestalten, dass es eine bestimmte Höhe hat und in allen Browsern gut aussieht? Ich habe versucht, Höhe einfach in CSS, aber der Text innerhalb der Box ist vertikal außermittig in Firefox.<select> HTML-Element mit Höhe

<select style="height:1.8em;"> 

Dies ist keine doppelte Frage. Die andere Frage fragt nach der Höhe des Dropdown-Felds, das angezeigt wird, wenn Sie auf ein Auswahlelement klicken. Meine Frage bezieht sich auf die Höhe des nicht ausgewählten Elements.

+0

Verwendung 'Line-height'. Stellen Sie den Wert auf die Höhe ein, die Sie festgelegt haben. Beispiel: 'line-height: 40px;' –

+0

Teilen Sie den Code, den Sie bereits haben. –

+0

auf welches Element verweisen Sie (div, table, span, ...)? kannst du Code schreiben .... –

Antwort

40

ich ein paar CSS-Hacks und gezielte Chrome/Safari/Firefox/IE einzeln verwendet haben, wie jeder Browser wählt ein wenig anders macht. Ich habe auf allen Browsern außer IE getestet.

Für Safari/Chrome, stellen Sie die height und line-height Sie für Ihre <select />.

Für Firefox werden wir Firefox-Standard Polsterung und Grenze, dann setzen unsere eigenen zu töten. Stellen Sie das Padding nach Belieben ein.

Für IE 8+, genau wie Chrome, haben wir die height und line-height Eigenschaften festgelegt. Diese beiden media queries können kombiniert werden. Aber ich habe es für Demozwecke getrennt. So können Sie sehen, was ich mache.

Bitte beachten Sie, für die height/line-height Eigenschaft in Chrome/Safari OSX zu arbeiten, können Sie die background auf einen benutzerdefinierten Wert festlegen. Ich habe die Farbe in meinem Beispiel geändert.

Hier ist eine jsFiddle der unten: http://jsfiddle.net/URgCB/4/

Für die Nicht-Hack Route, warum nicht eine benutzerdefinierte Auswahl Plug-in über jQuery verwenden? Schauen Sie sich diese:http://codepen.io/wallaceerick/pen/ctsCz

HTML:

<select> 
    <option>Here's one option</option> 
    <option>here's another option</option> 
</select> 

CSS:

@media screen and (-webkit-min-device-pixel-ratio:0) { /*safari and chrome*/ 
    select { 
     height:30px; 
     line-height:30px; 
     background:#f4f4f4; 
    } 
} 
select::-moz-focus-inner { /*Remove button padding in FF*/ 
    border: 0; 
    padding: 0; 
} 
@-moz-document url-prefix() { /* targets Firefox only */ 
    select { 
     padding: 15px 0!important; 
    } 
}   
@media screen\0 { /* IE Hacks: targets IE 8, 9 and 10 */   
    select { 
     height:30px; 
     line-height:30px; 
    }  
} 
+3

Das scheint in meinen Tests keine Auswirkung auf die Höhe zu haben. – stackoverflowrocks

+0

Mike, kannst du dein jsfiddle-Beispiel in Firefox laden? Am 24.1.1 wird der Text für mich an den Anfang der Auswahlbox gepinnt. – stackoverflowrocks

+0

Ich sehe jetzt ... lass mich untersuchen. –

-3

Sie können auch "center" der Text mit:

vertical-align: middle; 
+0

Vertical-align funktioniert nur mit 'tables' und' inline' Elementen. –

+0

@MikeBarwick Das ausgewählte Element * ist * inline – cimmanon

+0

Wahr, du hast Recht. –

Verwandte Themen