<select> Elemento HTML con altezza

Question

Qualcuno sa di un modo per disegnare un elemento di selezione HTML in modo che abbia una certa altezza e abbia un bell'aspetto tra i vari browser? Ho provato semplicemente ad impostare l'altezza in CSS, ma il testo all'interno della scatola è verticalmente decentrato in Firefox.

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

Questa non è una domanda duplicato. L'altra domanda richiede l'altezza della casella a discesa visualizzata quando si fa clic su un elemento selezionato. La mia domanda riguarda l'altezza dell'elemento select non selezionato.

Answer 1

Ho usato un paio di hack CSS e mirato Chrome/Safari/Firefox/IE singolarmente, come ogni browser rende seleziona un po 'diverso. Ho provato su tutti i browser tranne IE.

Per Safari/Chrome, impostare il height e line-height si desidera per il <select />.

Per Firefox, stiamo andando a uccidere padding di default di Firefox e di frontiera, quindi impostare la nostra. Imposta il padding come vuoi.

Per IE 8+, proprio come Chrome, abbiamo impostato le proprietà height e line-height. Questi due media queries possono essere combinati. Ma l'ho tenuto separato per scopi dimostrativi. Quindi puoi vedere cosa sto facendo.

Si prega di notare, per la proprietà height/line-height di lavorare in Chrome/Safari OSX, è necessario impostare il background per un valore personalizzato. Ho cambiato il colore nel mio esempio.

Ecco un jsFiddle del sottostante: http://jsfiddle.net/URgCB/4/

Per la rotta non-hack, perché non utilizzare una selezione personalizzata plug-in tramite jQuery? Dai un'occhiata a questo: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; 
    }  
} 

Answer 2

È inoltre possibile "centro" il testo con:

vertical-align: middle;