Ich möchte Padding den Optionen von HTML "Select" -Tag hinzufügen.Wie kann ich der HTML-Dropdown-Liste Auffüllung hinzufügen?
Ich versuche, es in der Stil-Eigenschaft von "auswählen" und "Option" hinzuzufügen, und es funktioniert nicht in IE.
Was kann ich tun?
OK, ich hasse alle 1990er Jahre zu klingen, sondern einfach vor und App-ending einen Raum der Option Text für Ihre gewünschten Ziele akzeptabel?
+1 vote: Dies ist die beste Lösung, da das OP nur links und rechts etwas Platz hinzufügen möchte und wenn er nicht ein paar Stunden damit verbringen will, ein benutzerdefiniertes Dropdown zu implementieren. –
Bitte tun Sie das nicht. Dies verhindert das Auswählen von Optionen aus einer Liste durch Eingabe. Es unterbricht auch die automatische Füllung. Dies ist eine besondere Impedanz für Benutzer mit Zugänglichkeitsanforderungen. –
** Eine andere Lösung, die in allen Browser ** funktioniert, ist das Hinzufügen von ' ' zur ersten Option in der Auswahllistenprüfung [this] (http://stackoverflow.com/questions/25752/how-doi-i-put-a -space-character-vor-option-text-in-a-html-select-element) und [dies] (http://stackoverflow.com/questions/5828697/how-to-retain-spaces-in-dropdownlist- asp-net-mvc-razor-views), Hoffnung hilft. – stom
CSS:
option{
padding: 0.5em;
}
Es funktioniert nicht in IE. – Billy
Der einzige Browser, in dem dies funktioniert, ist Firefox. Safari, Chrome und Opera nehmen davon keine Notiz. –
Es ist schwierig, ein Drop-Down-Box Cross-Browser, um Stil. Um irgendeine Art von Kontrolle zu erhalten, müssen Sie einen Ersatz in JavaScript codieren. Seien Sie gewarnt, aber:
folgende Werke, in FF3 + und Midori (und vermutlich anderen Webkit-Browser zu verwenden):
select
{width: 14em;
margin: 0 1em;
text-indent: 1em;
line-height: 2em;}
select * {width: 14em;
padding: 0 1em;
text-indent: 0;
line-height: 2em;}
die Breite ist en zu ermöglichen Wenn die Spalte nicht aktiv ist, wird der Rand in der angezeigten select Box angezeigt. text-indent wird verwendet, um Padding zwischen der linken Grenze der Auswahlbox und dem inneren Text vorzutäuschen. line-height ist nur um vertikalen Abstand zu ermöglichen.
Ich kann seine Verwendung in IE nicht kommentieren, fürchte ich, also wenn irgendjemand etwas zurückgeben könnte - oder sich anpassen -, wäre das gut.
Es ist erwähnenswert, dass der Dropdown-Teil der Auswahl (select *) für mich aus irgendeinem Grund außerhalb von FF3 nicht betroffen ist, also wenn das die Frage war, die Sie beantworten wollten, entschuldige ich mich dafür, nichts Neues anzubieten.
Demo an: http://davidrhysthomas.co.uk/so/select-styling.html
Ich könnte dies aus irgendeinem Grund nicht mit Padding oder Abstand arbeiten. Ich war mit einer jQuery-Lösung, die wie folgt aussieht:
$(document).click(function(){
$('#selector option').each(function(){
$(this).html(" "+$(this).text());
});
});
Erstellen Sie eine Klasse für die SELECT
.listBox{
width: 200px;
...etc
}
Jetzt definieren die Css für die Optionen der SELECT
.listBox option{
padding:4px;
...etc
}
Getestet am IE 10
Was versuchst du zu tun? Warum möchten Sie die Auswahloptionen auffüllen? –
Ich möchte links und rechts von ausgewählten Optionen etwas Platz hinzufügen, damit es besser aussieht. – Billy