Seleziona la dimensione dell'attributo dimensione che non funziona in Chrome/Safari?

Question

Come risolvere problema che selezionare attribuire dimensioni, come nel codice:

<select size="2"> 
    <option value="0" selected="selected">Default</option> 
    <option value="1">select 1</option> 
    <option value="2">select 2</option> 
    <option value="3">select 3</option> 
</select> 

Come posso farlo funzionare in Chrome e Safari?

Answer 1

Prova utilizzando la proprietà css width del tag select:

select { 
    width:value px; 
} 

Answer 2

Questo è un known bug in webkit browsers.

Il modo più semplice per farlo funzionare proprio come ti piace in Chrome e Safari sarebbe quello di specificare manualmente lo stile della selezione stessa.

Ecco uno working jsFiddle.

HTML:

<select size="2"> 
    <option value="0" selected="selected">Default</option> 
    <option value="1">select 1</option> 
    <option value="2">select 2</option> 
    <option value="3">select 3</option> 
</select> 

CSS:

select { 
    height:36px; 
    font-size:14px; 
} 

Answer 3

Io uso l'attributo size nel codice HTML per "altri" browser e quindi specificare l'aspetto WebKit in CSS. Sono disponibili altri tipi di opzioni di elenco di menu, il campo di testo non è l'unico. E potrebbe essere necessario modificare l'altezza in base alla dimensione del carattere. Questo lo fa sembrare lo stesso su tutti i browser.

CSS

select{ 
    -webkit-appearance: menulist-textfield; 
    height: 45px; 
}