Aggiunta di padding per selezionare le opzioni

Voglio aggiungere qualche tipo di spazio (padding, margine o quant’altro) tra le opzioni selezionate in html usando css. Ho già provato a utilizzare qualcosa come:

select option { padding:10px } 

tuttavia non ha funzionato. Ho già letto che è ansible farlo ma non funziona in IE. Ad ogni modo, mi piacerebbe farlo funzionare su altri browser anche se non funziona in IE.

PS: attualmente in uso Chrome

Esempio JSFiddle

    lo stile per selezionare l’opzione è molto limitato in modo da mantenere una coerenza e coerenza tra tutte le applicazioni nel sistema operativo, quindi il browser deve limitare lo stile di alcuni elementi di base come nel tag opzionale del tuo caso.

    La restrizione dipende dal browser al browser, come il padding e anche il margine del tag option funziona nel mozilla firefox mentre non funziona con chrome.

    Se è molto necessario nel tuo sito web lo stile del tag dell’opzione, ti suggerisco di usare qualche plugin jQuery (puoi anche fare un drop down del tuo, è semplice).

    L’aspetto dei tag di opzione è determinato dal browser nella mia esperienza e spesso per una buona ragione: pensa a quanto sia diverso l’aspetto di iOS v chrome e i vantaggi di ciò.

    È tuttavia ansible esercitare un certo controllo sull’elemento select, utilizzando l’attributo appearance prefisso del browser.

    Per esempio:

     select { padding: 2px 10px; border: 1px solid #979997; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } 

    Tuttavia, quando cliccato, appaiono come fanno normalmente in qualunque browser tu stia utilizzando.

    Se vuoi un controllo più preciso, la tua migliore scommessa credo sia il suggerimento di @ sumitb.mdi di un plugin jquery o creare qualcosa di simile da solo.