Wie kann ich der HTML-Dropdownliste Padding hinzufügen?

Lesezeit: 3 Minuten

Billys Benutzeravatar
Billy

Ich möchte den Optionen des HTML-Tags “select” eine Auffüllung hinzufügen.

Ich versuche, es in der Stileigenschaft von “select” und “option” hinzuzufügen, und es funktioniert nicht im IE.

Was kann ich machen?

  • Was versuchst du zu machen? Warum möchten Sie die ausgewählten Optionen auffüllen?

    – Friol

    5. Juli 2009 um 8:40 Uhr

  • Ich möchte links und rechts von ausgewählten Optionen etwas Platz hinzufügen, damit es besser aussieht.

    – Billi

    5. Juli 2009 um 9:35 Uhr

OK, ich hasse es, alle 1990er Jahre zu klingen, aber wäre es für Ihre gewünschten Ziele akzeptabel, einfach ein Leerzeichen vor und an den Optionstext anzuhängen?

  • +1 Stimme: Dies ist die beste Lösung, da das OP nur links und rechts etwas Platz hinzufügen möchte und nicht ein paar Stunden damit verbringen möchte, benutzerdefinierte Dropdowns zu implementieren.

    – Jan Zich

    6. Juli 2009 um 15:52 Uhr

  • Bitte tun Sie das nicht. Das verhindert die Auswahl von Optionen aus einer Liste durch Eingabe. Es unterbricht auch das automatische Ausfüllen. Dies ist eine besondere Belastung für Benutzer mit Anforderungen an die Barrierefreiheit.

    – Iain Collins

    4. April 2016 um 12:32 Uhr

  • Eine weitere Lösung, die in allen Browsern funktioniertfügt hinzu   Zur ersten Option in der Auswahlliste dies und das ankreuzen, Hope hilft.

    – Shaiju T

    5. Oktober 2016 um 8:31 Uhr

Es ist schwierig, ein Dropdown-Feld browserübergreifend zu gestalten. Um irgendeine Art von Steuerung zu erhalten, müssen Sie einen Ersatz in JavaScript codieren. Seien Sie jedoch gewarnt:

  • Denken Sie daran, dass der Benutzer möglicherweise Schwierigkeiten hat, Ihr Dropdown-Menü zu verwenden. Berücksichtigen Sie die Benutzerfreundlichkeit
  • Ersetzen Sie ein ausgewähltes Element durch JS – dies ist ein Problem der Barrierefreiheit (und ermöglicht auch Benutzern ohne JS-Unterstützung, die Formulareingabe zu verwenden).

Folgendes funktioniert in FF3+ und Midori (und vermutlich anderen Webkit-Browsern):

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 soll genügend Platz in der Anzeige lassen select Box wenn nicht aktiv, tut die Marge was sie immer tut, text-indent wird verwendet, um eine Auffüllung zwischen der linken Grenze des Auswahlfelds und dem inneren Text vorzutäuschen. line-height dient nur dazu, vertikale Abstände zuzulassen.

Ich kann mich leider nicht zu seiner Verwendung im IE äußern, also wäre es gut, wenn jemand Feedback geben oder sich anpassen könnte.

Es ist erwähnenswert, dass der Dropdown-Teil der Auswahl (select *) ist außerhalb von FF3 für mich aus irgendeinem Grund nicht betroffen. Wenn das also die Frage war, die Sie beantworten wollten, entschuldige ich mich dafür, dass ich nichts Neues angeboten habe.

Demo unter: http://davidrhysthomas.co.uk/so/select-styling.html

Erstellen Sie eine Klasse für die SELECT

.listBox{
   width: 200px; 
   ...etc
}

Definieren Sie nun das CSS für die Optionen des SELECT

 .listBox option{
     padding:4px;
    ...etc
  }

Getestet auf IE 10

CSS:

option{
 padding: 0.5em;
}

  • Der einzige Browser, in dem das funktioniert, ist Firefox. Safari, Chrome und Opera nehmen davon keine Notiz.

    – Steve Harrison

    5. Juli 2009 um 8:33 Uhr

Benutzeravatar von durron597
durron597

Ich konnte dies aus irgendeinem Grund nicht mit Polsterung oder Abstand zum Laufen bringen. Ich ging mit einer jQuery-Lösung, die so aussieht:

$(document).click(function(){  
  $('#selector option').each(function(){  
    $(this).html("  "+$(this).text());  
  });  
});

  • Der einzige Browser, in dem das funktioniert, ist Firefox. Safari, Chrome und Opera nehmen davon keine Notiz.

    – Steve Harrison

    5. Juli 2009 um 8:33 Uhr

1430150cookie-checkWie kann ich der HTML-Dropdownliste Padding hinzufügen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy