Come centrare il testo in un elenco di selezione

Question

Sto riscontrando problemi nello stile di un elenco di selezione in un modulo HTML. Fondamentalmente voglio che abbia una dimensione del font di 12px e un'altezza di 30px; Il problema è che la casella è disegnata a destra, ma il rendering del testo varia in ogni browser. In FireFox lo rende nell'angolo in alto a sinistra. Voglio centrare verticalmente il testo. Qualcuno sa di un modo per fare questo o ho bisogno di fare qualcosa di personalizzato da un ul?

Grazie

Answer 1

L'unico modo è far cadere le <select> e utilizzare un <input type="text"< e un <div> per darvi l'esatto sensazione di un elenco di selezione, ma con la capacità di fare tutto quanto sarà un <li> che si ha alla fine.

Io uso questo approccio per non mostrare il testo allineato ma per usare una piccola icona per ogni riga. Questo mi dà anche la possibilità di mostrare esattamente come voglio non importa quale browser sia utilizzato.

come l'immagine qui sotto

Answer 2

Non è possibile personalizzare in modo affidabile <select> elementi utilizzando i CSS in tutti i browser.

È necessario creare un controllo elenco personalizzato.

Answer 3

Buona fortuna, allineamento del testo funziona solo con elementi di blocco. L'elenco di selezione viene formattato in modo diverso dai browser, come nella maggior parte degli elementi del campo modulo (come il tipo di input del file). Desideri giorni migliori. I workaround che ho visto per questo sono davvero brutti.

Answer 4

po 'tardi per aggiungere una nuova risposta, tuttavia mi sono imbattuto tua domanda cercando la stessa risposta e di pensiero ci deve essere un altro modo.

Evviva! Ne ho effettivamente trovato uno!

Così per eventuali nuove persone che vengono a trovare questa risposta, ecco come ho raggiunto questo:

sufficiente utilizzare   per centrare manualmente ogni opzione nel menu a tendina.