Come posso controllare l'altezza di un elemento Option in Webkit?

Questo sembra davvero semplice ma non riesco nemmeno a trovare qualcosa che mi dice che non è possibile, per non parlare di come farlo.Come posso controllare l'altezza di un elemento Option in Webkit?

Ho una pagina che utilizza espansi/multipli select s e non riesco a controllare l'altezza delle opzioni. Sembrano davvero comodi. In Firefox, i valori CSS per option in height e line-height sembrano avere l'effetto desiderato, così come lo è padding, ma non in Chrome 8 o Safari 5. Mi manca qualcosa? Ecco un esempio del mio codice. Ho inserito tutto ciò che potrebbe influenzare l'opzione nel caso in cui ci sia un valore prevalente che mi manca.

body, input, select, checkbox { 
 
    font-family:'Avenir Lt Std',AppleGothic,'century gothic',Verdana,sans-serif; 
 
    font-size: 15px; 
 
    font-weight:200; 
 
    line-height: 18px; 
 
} 
 

 
input, select { 
 
    color:#4c2a18; 
 
    border: 1px solid #cfc8b4; 
 
    background-color:#ffffff; 
 
    -moz-border-radius: 0; 
 
    -webkit-border-radius: 0; 
 
    border-radius: 0; 
 
    margin:0; 
 
} 
 

 
option { 
 
    height: 35px; 
 
    padding:5px; 
 
    line-height: 35px; 
 
}

<select size="5"> 
 
    <option value="">This is option 1</option> 
 
    <option value="">Option 2</option> 
 
    <option value="">Just trying to show how the line height thing works.</option> 
 
</select>

È possibile vedere in azione here.

fonte

2011-01-20 Ben Saufley

Non sono sicuro al 100%, ma penso che questo sia probabilmente impossibile in Chrome. L'elemento 'select' (e, naturalmente, i suoi elementi' option' child) sono sotto il controllo del sistema operativo sottostante, piuttosto che del browser. Che funzioni affatto in altri browser mi sorprende. È possibile utilizzare uno stile, e JavaScript controllato, 'ul' (o' ol') per ottenere un elemento di tipo select con stile. –

Posso applicare l'elemento 'select' in Chrome e aggiungere' padding' e così via. –

Ho sempre dimenticato che "Invio" invia il commento. Comunque ho preso in considerazione la rotta 'ul', ma sembra non necessario quando il' select' fa un lavoro perfettamente adeguato, tranne che per racchiudere tutte le cose troppo vicine tra loro. Sto cercando di capire perché non sembra sempre pieno - se c'è qualcosa di più in alto nella gerarchia che sta causando questo o cosa. –

questo non è possibile in Chrome, secondo the electric toolbox:

Impostazione imbottitura su un optgroup o opzione non ha effetto in Chrome in modo da Non è possibile controllare la quantità di indentazione. Puoi impostare il padding di una selezione nel suo complesso in Chrome (come è possibile con IE8) ma sembra davvero strano. A differenza di IE8, è possibile fare clic su in qualsiasi punto della selezione per aprirlo anche se se ha il padding.

fonte

2011-01-20 16:37:35 mVChr

+11

Ottimo! Grazie. Questo è stupido. –

@ Ben Saufley, se si desidera un controllo personalizzato del modulo, è necessario: 1. tirare il proprio, b. usa una lib pre-costruita, iii. vivi con il default. – zzzzBov

@zzzzBov - Quindi ho sentito. Anche se posso fare praticamente tutto ciò di cui ho bisogno senza coinvolgere JS. Questo era un piccolo problema estetico che speravo di risolvere semplicemente. –

Come posso controllare l'altezza di un elemento Option in Webkit?

risposta

Problemi correlati