Voglio aggiungere padding alle opzioni del tag "select" html.Come posso aggiungere padding a dropdownlist in html?
Provo ad aggiungerlo nella proprietà style di "select" e "option" e non funziona in IE.
Cosa posso fare?
OK, Odio suono tutti gli anni 1990, ma sarebbe semplicemente pre e app-fine uno spazio per il testo dell'opzione essere accettabile per i tuoi obiettivi desiderati?
+1 voto: Questa è la soluzione migliore dato che l'OP vuole solo aggiungere uno spazio a sinistra ea destra, e se non vuole passare un paio d'ore a implementare il dropdown personalizzato. –
Per favore non farlo. Ciò impedisce di selezionare le opzioni da un elenco digitando. Inoltre, si interrompe il riempimento automatico. Questa è una particolare impedenza per gli utenti con requisiti di accessibilità. –
** Un'altra soluzione che funziona su tutti i browser **, è la prima aggiunta all'opzione ' 'nella selezione dell'elenco selezionare [this] (http://stackoverflow.com/questions/25752/how-do-i-put-a -space-character-before-option-text-in-a-html-select-element) e [this] (http://stackoverflow.com/questions/5828697/how-to-retain-spaces-in-dropdownlist- asp-net-mvc-rasoio-viste), Hope aiuta. – stom
CSS:
option{
padding: 0.5em;
}
Non funziona in IE. – Billy
L'unico browser in cui funziona è Firefox. Safari, Chrome e Opera non ne fanno caso. –
E 'difficile per lo stile un menu a discesa del browser casella trasversale. Per ottenere qualsiasi tipo di controllo, dovrai codificare uno sostitutivo in JavaScript. Attenzione, però:
I seguenti lavori, in FF3 + e Midori (e presumibilmente altri browser Webkit):
select
{width: 14em;
margin: 0 1em;
text-indent: 1em;
line-height: 2em;}
select * {width: 14em;
padding: 0 1em;
text-indent: 0;
line-height: 2em;}
la larghezza è di consentire en nella stanza visualizzata nel riquadro select quando non è attivo, il margine fa quello che fa sempre, text-indent viene utilizzato per simulare il riempimento tra il limite sinistro della casella di selezione e il testo interno. line-height è solo per consentire la spaziatura verticale.
Non riesco a commentare il suo uso in IE, temo, quindi se qualcuno potesse dare da mangiare - o adattare - per adattarsi sarebbe bello.
Vale la pena notare che la parte a discesa del select (select *) non è influenzata al di fuori di FF3 per me, per qualsiasi motivo, quindi se quella era la domanda che volevi rispondere, mi scuso per non offrire nulla di nuovo.
Non riesco a farlo funzionare con padding o spaziatura per qualche motivo. Sono andato con una soluzione jQuery che assomiglia a questo:
$(document).click(function(){
$('#selector option').each(function(){
$(this).html(" "+$(this).text());
});
});
creare una classe per SELECT
.listBox{
width: 200px;
...etc
}
Ora definire il Css per le opzioni di SELECT
.listBox option{
padding:4px;
...etc
}
Testato su IE 10
cosa stai cercando di fare? perché vuoi riempire le opzioni di selezione? –
Desidero aggiungere uno spazio ai lati sinistro e destro delle opzioni selezionate per renderlo migliore. – Billy