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

102

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.

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

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?

css html-select Jitendra Vyas
quelle
@ ManseUK - Es geht nur <option>nicht um die gesamte Dropdown-Liste
Jitendra Vyas
2
@ ManseUK: Ich bin mir nicht sicher, ob das dasselbe ist. In dieser Frage wird gefragt, ob Sie <select>das Erscheinungsbild des Elements auf der Seite gestalten können. In dieser Frage wird gefragt, ob Sie die Liste der <option>Elemente formatieren können .
Andy E
13
Um Gottes willen ist dies KEIN Duplikat einer der beiden verknüpften Fragen (die sich übrigens voneinander unterscheiden). Bei einem geht es ausschließlich darum, die Auswahl und nicht bei der Option zu stylen, während bei diesem eine Frage darum geht, auch die Optionen zu stylen, und bei dem anderen geht es nicht nur um CSS / No-Js.
Matto
12
Ich habe es satt, Fragen zu sehen, die fälschlicherweise als doppelt markiert oder falsch geschlossen sind und dies jahrelang bleiben, obwohl sie sich als falsch erwiesen haben.
Matto
2
@ovokuro codepen.io/lambder/pen/NbmwRb
Lambder

Antworten:

70

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>
Erweitern Sie das Snippet

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.

Savas Vedova
quelle
3
+1 danke es ist guter Code. aber in meinem Fall möchte ich damit machen <select>. Verwendung von <div>ist semantisch nicht korrekt.
Jitendra Vyas
2
@ JitendraVyas, ich weiß, aber wie ich antwortete, ist das nicht möglich. Was Sie auf dem ersten Bild erreicht haben, ist das Beste, was Sie tun können. Siehe die Bearbeitung. Übrigens habe ich auch Ihre vorherige Frage beantwortet, bitte sehen Sie es.
Savas Vedova
Der Teil 'Wichtiges Update' schließt daraus, dass Sie optionTags mit CSS formatieren können, aber Sie können nicht, Sie können nur das selectTag formatieren. Was in dieser Antwort gezeigt wird
svnm
Hier ist eine JavaScript-Version des obigen Beispiels, die Rückruf und einige andere nützliche Funktionen hinzufügt
Coco Puffs
4

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 ...

danwellman
quelle
2

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.

cchana
quelle
Bitte entfernen Sie den letzten Absatz - die URL ist online nicht zugänglich.
Kumarshar