Dropdown Android (Seleziona) CSS

Question

Attualmente sto scrivendo alcuni fogli di stile per i browser mobili e ho riscontrato uno strano problema nel browser Android. Quando si modifica l'attributo CSS della dimensione del carattere di una casella di testo, la casella diventa più grande per accogliere il testo più grande. Tuttavia, facendo ciò su una casella di selezione, non viene modificata la dimensione della casella di selezione, ma il testo diventa ancora più grande (in realtà si sovrappone alla parte superiore e inferiore dell'elemento del modulo di rendering).

Qualcuno può dirmi se è possibile aumentare l'altezza delle caselle di selezione nel browser Android. O se non mi punti nella direzione di un elenco di attributi CSS che possono essere applicati a loro.

Grazie.

Answer 1

Questo sembra essere un bug del browser. Puoi anche riprodurlo quando imposti le dimensioni del testo del tuo browser su "enorme" (nelle impostazioni). Ho aggiunto un new issue e suggerire una soluzione un'immagine di sfondo personalizzata con per ora:

<select style="background: url('big-select-bg.png')"/> 

Answer 2

impostare l'opacità del controllo di selezione a 0

quindi inserire un contorl arco disegnato per assomigliare una casella di testo dietro il controllo di selezione in modo che il controllo di selezione si trovi direttamente sopra lo span.

L'utente non vedrà il controllo di selezione ma quando l'utente tenta di inserire il testo nello span appariranno le opzioni di selezione per il controllo di selezione.

Dopo che l'utente ha effettuato la selezione, utilizzare javascript per aggiornare l'innerHTML dello span con il valore del controllo di selezione.

Assicurarsi che le dimensioni dello span e la linea di controllo selezionata siano ben allineate. (Non utilizzare un controllo texbox reale)

mealaroni.com

Answer 3

Un'altra opzione è possibile utilizzare (testato su Galaxy S esegue la versione Android 2.1-update1):

select { 
    -webkit-appearance: listbox; 
} 
select, input { 
    width: 100%; 
    height: 40px; 
    line-height:40px; 
    border: 1px solid #999; 
    border-radius: 6px; 
    margin-bottom:10px; 
} 

In questo modo gli ingressi e seleziona tutti sembrano uguali, facendo clic sulla selezione si aprirà normalmente il menu delle opzioni.

Answer 4

provare questo:

select{ 

    -webkit-appearance: menulist-text; 
} 

Answer 5

Per me "-webkit-apparizione: listbox;" risolto il problema non completamente.

ho dovuto aggiungere un attributo padding inoltre:

select { 
    -webkit-appearance: listbox; 
    width: 100%; 
    height: 35px; 
    line-height: 35px; 
    border: 1px solid #bbb; 
    border-radius: 4px; 
    padding: 0 0 1px 8px; 
}