Wie kann man die <Option> nur mit CSS gestalten?

Hinweis: Bei dieser Frage geht es nicht darum, ein benutzerdefiniertes Dropdown-Menü zu erstellen. Es geht nur um Möglichkeiten, <option>Elemente innerhalb des Auswahlelements in CSS zu gestalten

Wie kann ich <option>s eines <select>Elements browserübergreifend formatieren? Ich kenne viele JavaScript-Methoden, mit denen das Dropdown-Menü für die Konvertierung angepasst werden kann, nach <li>denen ich nicht frage .

<select class="select">
    <option selected>Select</option>
    <option>Blue</option>
    <option >Red</option>
    <option>Green</option>
    <option>Yellow</option>
    <option>Brown</option>
</select>

Ich frage, was nur mit CSS möglich sein könnte, mit Kompatibilität für IE9 +, Firefox und Chrome.

Ich möchte so oder so nah wie möglich stylen.

Ich habe es hier versucht http://jsfiddle.net/jitendravyas/juwz3/3/ , aber Chrome zeigt kein Styling außer der Schriftfarbe, während Firefox noch mehr zeigt. Wie können Rahmen und Polster auch in Chrome funktionieren?

EDIT 2015 Mai

Haftungsausschluss: Ich habe den Ausschnitt aus der unten verlinkten Antwort entnommen:

Wichtiges Update!

Zusätzlich zu WebKit können wir ab Firefox 35 die appearanceEigenschaft verwenden:

Wenn Sie -moz-appearanceden noneWert in einer Combobox verwenden, entfernen Sie jetzt die Dropdown-Schaltfläche

Um das Standard-Styling auszublenden, müssen Sie nun einfach die folgenden Regeln für unser Auswahlelement hinzufügen:

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

Für die IE 11-Unterstützung können Sie [ ::-ms-expand] [15] verwenden.

select::-ms-expand { /* for IE 11 */
    display: none;
}

Alte Antwort

Leider ist das, was Sie fragen, mit reinem CSS nicht möglich. Hier ist jedoch etwas Ähnliches, das Sie als Workaround auswählen können. Überprüfen Sie den Live-Code unten.

div { 
  margin: 10px;
  padding: 10px; 
  border: 2px solid purple; 
  width: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
div > ul { display: none; }
div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
div:hover > ul > li:hover { background: white;}
div:hover > ul > li:hover > a { color: red; }

<div>
  Select
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

BEARBEITEN

Hier ist die Frage, die Sie vor einiger Zeit gestellt haben. Wie kann man ein <select> Dropdown mit CSS nur ohne JavaScript gestalten? Wie es dort heißt, können Sie nur in Chrome und teilweise in Firefox erreichen, was Sie wollen. Ansonsten gibt es leider keine browserübergreifende reine CSS-Lösung für die Gestaltung einer Auswahl.

Es gibt keine browserübergreifende Möglichkeit, Optionselemente zu gestalten, schon gar nicht im Umfang Ihres zweiten Screenshots. Möglicherweise können Sie sie fett formatieren und die Schriftgröße festlegen, aber das wird es auch sein ...

Ich habe bereits mit ausgewählten Elementen herumgespielt und ohne die Funktionalität mit JavaScript zu überschreiben, glaube ich nicht, dass dies in Chrome möglich ist. Unabhängig davon, ob Sie ein Plugin verwenden oder Ihren eigenen Code schreiben, ist CSS nur ein No-Go für Chrome / Safari, und wie Sie sagten, kann Firefox besser damit umgehen.