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

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?

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?

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;
}

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());  
  });  
});