Gibt es eine <select>reine CSS-Möglichkeit, ein Dropdown zu gestalten?

Ich muss ein <select>Formular so weit wie möglich ohne JavaScript formatieren. Welche Eigenschaften kann ich dazu in CSS verwenden?

Dieser Code muss mit allen gängigen Browsern kompatibel sein:

• Internet Explorer 6, 7 und 8
• Feuerfuchs
• Safari

Ich weiß, dass ich es mit JavaScript schaffen kann: Beispiel .

Und ich spreche nicht von einfachem Styling. Ich möchte wissen, was wir nur mit CSS am besten können.

Ich habe ähnliche Fragen zum Stapelüberlauf gefunden.

Und dieser auf Doctype.com.

Hier sind drei Lösungen:

Lösung Nr. 1 - Erscheinungsbild: Keine - mit Internet Explorer 10 - 11-Problemumgehung ( Demo )

- -

Um den Standardpfeil appearance: nonefür das Auswahlelement auszublenden , fügen Sie Ihren eigenen benutzerdefinierten Pfeil mit hinzubackground-image

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;       /* Remove default arrow */
   background-image: url(...);   /* Add custom arrow */
}

Browser-Unterstützung:

appearance: nonehat eine sehr gute Browser-Unterstützung ( caniuse ) - mit Ausnahme von Internet Explorer 11 (und höher) und Firefox 34 (und höher).

Wir können diese Technik verbessern und durch Hinzufügen Unterstützung für Internet Explorer 10 und Internet Explorer 11 hinzufügen

select::-ms-expand {
    display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}

Wenn Internet Explorer 9 ein Problem darstellt, können wir den Standardpfeil nicht entfernen (was bedeuten würde, dass wir jetzt zwei Pfeile haben), aber wir könnten einen funky Internet Explorer 9-Selektor verwenden.

Um zumindest unseren benutzerdefinierten Pfeil rückgängig zu machen, lassen Sie den Standardauswahlpfeil intakt.

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background-image:none\9;
        padding: 5px\9;
    }
}

Alle zusammen:

select {
  margin: 50px;
  width: 150px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #CCC;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}


/* CAUTION: Internet Explorer hackery ahead */


select::-ms-expand {
    display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background: none\9;
        padding: 5px\9;
    }
}

<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>

Diese Lösung ist einfach und bietet eine gute Browserunterstützung - sie sollte im Allgemeinen ausreichen.

Wenn Browserunterstützung für Internet Explorer 9 (und höher) und Firefox 34 (und höher) erforderlich ist, lesen Sie weiter ...

Lösung 2 Schneiden Sie das Auswahlelement ab, um den Standardpfeil ( Demo ) auszublenden.

- -

(Lesen Sie hier mehr)

Wickeln Sie das selectElement in ein div mit einer festen Breite und overflow:hidden.

Geben Sie dem selectElement dann eine Breite von etwa 20 Pixel, die größer als das div ist .

Das Ergebnis ist, dass der Standard-Dropdown-Pfeil des selectElements (aufgrund des overflow:hiddenauf dem Container) ausgeblendet wird und Sie jedes gewünschte Hintergrundbild auf der rechten Seite des Div platzieren können.

Der Vorteil dieses Ansatzes besteht darin, dass er browserübergreifend ist (Internet Explorer 8 und höher, WebKit und Gecko ). Der Nachteil dieses Ansatzes ist jedoch, dass das Options-Dropdown-Menü auf der rechten Seite herausragt (um die 20 Pixel, die wir ausgeblendet haben ... weil die Optionselemente die Breite des Auswahlelements annehmen).

[Es sollte jedoch beachtet werden, dass, wenn das benutzerdefinierte Auswahlelement nur für mobile Geräte erforderlich ist - das oben genannte Problem nicht auftritt -, da jedes Telefon das Auswahlelement nativ öffnet. Für Mobilgeräte ist dies möglicherweise die beste Lösung.]

.styled select {
  background: transparent;
  width: 150px;
  font-size: 16px;
  border: 1px solid #CCC;
  height: 34px;
}
.styled {
  margin: 50px;
  width: 120px;
  height: 34px;
  border: 1px solid #111;
  border-radius: 3px;
  overflow: hidden;
  background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #EEE;
}

<div class="styled">
  <select>
    <option>Pineapples</option>
    <option selected>Apples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
</div>

Wenn der benutzerdefinierte Pfeil in Firefox - vor Version 35 - erforderlich ist , Sie jedoch keine alten Versionen von Internet Explorer unterstützen müssen, lesen Sie weiter ...

Lösung 3 - Verwenden Sie die pointer-eventsEigenschaft ( Demo )

- -

(Lesen Sie hier mehr)

Die Idee hier ist, ein Element über den nativen Dropdown-Pfeil zu legen (um unser benutzerdefiniertes zu erstellen) und dann Zeigerereignisse darauf zu verbieten.

Vorteil: Es funktioniert gut in WebKit und Gecko. Es sieht auch gut aus (keine hervorstehenden optionElemente).

Nachteil: Internet Explorer (Internet Explorer 10 und niedriger) wird nicht unterstützt pointer-events, dh Sie können nicht auf den benutzerdefinierten Pfeil klicken. Ein weiterer (offensichtlicher) Nachteil dieser Methode ist, dass Sie Ihr neues Pfeilbild nicht mit einem Hover-Effekt oder einem Handcursor anvisieren können, da wir gerade Zeigerereignisse deaktiviert haben!

Mit dieser Methode können Sie jedoch Modernizer oder bedingte Kommentare verwenden, um Internet Explorer auf den integrierten Standardpfeil zurückzusetzen.

NB: Da Internet Explorer 10 nicht mehr unterstützt wird conditional comments: Wenn Sie diesen Ansatz verwenden möchten, sollten Sie wahrscheinlich Modernizr verwenden . Es ist jedoch weiterhin möglich, das Zeigerereignis-CSS mit einem hier beschriebenen CSS-Hack aus Internet Explorer 10 auszuschließen .

.notIE {
  position: relative;
  display: inline-block;
}
select {
  display: inline-block;
  height: 30px;
  width: 150px;
  outline: none;
  color: #74646E;
  border: 1px solid #C8BFC4;
  border-radius: 4px;
  box-shadow: inset 1px 1px 2px #DDD8DC;
  background: #FFF;
}
/* Select arrow styling */

.notIE .fancyArrow {
  width: 23px;
  height: 28px;
  position: absolute;
  display: inline-block;
  top: 1px;
  right: 3px;
  background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #FFF;
  pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/

@media screen and (min-width: 0\0) {
  .notIE .fancyArrow {
    display: none;
  }
}

<!--[if !IE]> -->
<div class="notIE">
  <!-- <![endif]-->
  <span class="fancyArrow"></span>
  <select>
    <option>Apples</option>
    <option selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
  <!--[if !IE]> -->
</div>
<!-- <![endif]-->

Es ist möglich, aber leider meistens in WebKit-basierten Browsern, soweit wir als Entwickler dies benötigen. Hier ist das Beispiel für das CSS-Styling, das im Chrome-Optionsfeld über den integrierten Inspektor für Entwicklertools erfasst wurde und an die derzeit unterstützten CSS-Eigenschaften in den meisten modernen Browsern angepasst wurde:

select {
    -webkit-appearance: button;
    -moz-appearance: button;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-padding-end: 20px;
    -moz-padding-end: 20px;
    -webkit-padding-start: 2px;
    -moz-padding-start: 2px;
    background-color: #F07575; /* Fallback color if gradients are not supported */
    background-image: url(../images/select-arrow.png), -webkit-linear-gradient(top, #E5E5E5, #F4F4F4); /* For Chrome and Safari */
    background-image: url(../images/select-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Firefox (3.6 to 15) */
    background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of Internet Explorer  10*/
    background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */
    background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */
    background-position: center right;
    background-repeat: no-repeat;
    border: 1px solid #AAA;
    border-radius: 2px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    color: #555;
    font-size: inherit;
    margin: 0;
    overflow: hidden;
    padding-top: 2px;
    padding-bottom: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Wenn Sie diesen Code auf einer beliebigen Seite in einem WebKit-basierten Browser ausführen, sollte sich das Erscheinungsbild des Auswahlfelds ändern, der Standard-OS-Pfeil entfernt und ein PNG-Pfeil hinzugefügt werden. Stellen Sie vor und nach dem Etikett einen Abstand ein, fast alles, was Sie möchten.

Der wichtigste Teil ist die appearanceEigenschaft, die das Verhalten des Elements ändert.

Es funktioniert perfekt in fast allen WebKit-basierten Browsern, einschließlich mobilen Browsern, obwohl Gecko appearanceanscheinend nicht so gut wie WebKit unterstützt.

Das Auswahlelement und seine Dropdown-Funktion sind schwer zu formatieren .

Stilattribute für ausgewähltes Element von Chris Heilmann bestätigen, was Ryan Dohery in einem Kommentar zur ersten Antwort gesagt hat:

"Das select-Element ist Teil des Betriebssystems und nicht des Browser-Chrome. Daher ist es sehr unzuverlässig im Stil und es ist nicht unbedingt sinnvoll, es trotzdem zu versuchen."

Ich hatte genau dieses Problem, außer dass ich keine Bilder verwenden konnte und nicht durch die Browserunterstützung eingeschränkt war. Dies sollte «auf Spezifikation» sein und mit etwas Glück irgendwann überall funktionieren .

Es werden geschichtete gedrehte Hintergrundebenen verwendet, um einen Dropdown-Pfeil «auszuschneiden», da Pseudoelemente für das ausgewählte Element nicht funktionieren würden.

Bearbeiten: In dieser aktualisierten Version verwende ich CSS-Variablen und ein winziges Themensystem.

:root {
  --radius: 2px;
  --baseFg: dimgray;
  --baseBg: white;
  --accentFg: #006fc2;
  --accentBg: #bae1ff;
}

.theme-pink {
  --radius: 2em;
  --baseFg: #c70062;
  --baseBg: #ffe3f1;
  --accentFg: #c70062;
  --accentBg: #ffaad4;
}

.theme-construction {
  --radius: 0;
  --baseFg: white;
  --baseBg: black;
  --accentFg: black;
  --accentBg: orange;
}

select {
  font: 400 12px/1.3 sans-serif;
  -webkit-appearance: none;
  appearance: none;
  color: var(--baseFg);
  border: 1px solid var(--baseFg);
  line-height: 1;
  outline: 0;
  padding: 0.65em 2.5em 0.55em 0.75em;
  border-radius: var(--radius);
  background-color: var(--baseBg);
  background-image: linear-gradient(var(--baseFg), var(--baseFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(var(--accentBg) 42%, var(--accentFg) 42%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 1px 100%, 20px 22px, 20px 22px, 20px 100%;
  background-position: right 20px center, right bottom, right bottom, right bottom;   
}

select:hover {
  background-image: linear-gradient(var(--accentFg), var(--accentFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
}

select:active {
  background-image: linear-gradient(var(--accentFg), var(--accentFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
  color: var(--accentBg);
  border-color: var(--accentFg);
  background-color: var(--accentFg);
}

<select>
  <option>So many options</option>
  <option>...</option>
</select>

<select class="theme-pink">
  <option>So many options</option>
  <option>...</option>
</select>

<select class="theme-construction">
  <option>So many options</option>
  <option>...</option>
</select>

Die größte Inkonsistenz, die ich beim Stylen ausgewählter Dropdowns festgestellt habe, ist das Rendern von Safari und Google Chrome (Firefox kann vollständig über CSS angepasst werden). Nach einigem Durchsuchen der dunklen Tiefen des Internets stieß ich auf Folgendes, das meine Bedenken mit WebKit fast vollständig löst:

Safari und Google Chrome beheben :

select {
  -webkit-appearance: none;
}

Dadurch wird jedoch der Dropdown-Pfeil entfernt. Sie können einen Dropdown-Pfeil in der Nähe divmit einem Hintergrund, einem negativen Rand oder absolut über dem ausgewählten Dropdown- Pfeil hinzufügen.

* Weitere Informationen und andere Variablen finden Sie in der CSS-Eigenschaft: -webkit-Erscheinungsbild .

<select>Tags können wie jedes andere HTML-Element auf einer in einem Browser gerenderten HTML-Seite über CSS gestaltet werden. Unten finden Sie ein (zu einfaches) Beispiel, mit dem ein ausgewähltes Element auf der Seite positioniert und der Text der Optionen blau dargestellt wird.

Beispiel-HTML-Datei (selectExample.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Select Styling</title>
  <link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="cherry">Cherry</option>
</select>
</body>
</html>

Beispiel-CSS-Datei (selectExample.css):

/* All select elements on page */
select {
  position: relative;
}

/* Style by class. Effects the text of the contained options. */
.blueText {
  color: #0000FF;
}

/* Style by id. Effects position of the select drop down. */
#styledSelect {
  left: 100px;
}

Der Blog-Beitrag Wie man ein CSS-Formular im Dropdown-Stil erstellt, funktioniert kein JavaScript für mich, aber es schlägt in Opera fehl :

select {
  border: 0 none;
  color: #FFFFFF;
  background: transparent;
  font-size: 20px;
  font-weight: bold;
  padding: 2px 10px;
  width: 378px;
  *width: 350px;
  *background: #58B14C;
}

#mainselection {
  overflow: hidden;
  width: 350px;
  -moz-border-radius: 9px 9px 9px 9px;
  -webkit-border-radius: 9px 9px 9px 9px;
  border-radius: 9px 9px 9px 9px;
  box-shadow: 1px 1px 11px #330033;
  background: url("arrow.gif") no-repeat scroll 319px 5px #58B14C;
}

<div id="mainselection">
  <select>
    <option>Select an Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>

Hier ist eine Version, die in allen modernen Browsern funktioniert. Der Schlüssel wird verwendet, appearance:nonewodurch die Standardformatierung entfernt wird. Da die gesamte Formatierung weg ist, müssen Sie den Pfeil wieder hinzufügen, der die Auswahl visuell von der Eingabe unterscheidet.

Arbeitsbeispiel: https://jsfiddle.net/gs2q1c7p/

select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 50%;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
    padding: .5em;
    padding-right: 1.5em
}

#mySelect {
    border-radius: 0
}

<select id="mySelect">
    <option>Option 1</option>
    <option>Option 2</option>
</select>

Ich bin mit Bootstrap zu Ihrem Fall gekommen . Dies ist die einfachste Lösung, die funktioniert:

select.form-control {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 1ex;
    background-origin: content-box;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=");
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="container">
  <form class="form-horizontal">
    <select class="form-control">
      <option>One</option>
      <option>Two</option>
    </select>
  </form>
</section>

Hinweis: Das base64-Zeug ist fa-chevron-downin SVG.

In modernen Browsern ist es relativ schmerzlos, das <select>in CSS zu stylen. Mit appearance: nonedem einzigen schwierigen Teil auf den Pfeil ersetzt (wenn das , was Sie wollen). Hier ist eine Lösung, die einen Inline- data:URI mit Klartext-SVG verwendet:

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  
  background-repeat: no-repeat;
  background-size: 0.5em auto;
  background-position: right 0.25em center;
  padding-right: 1em;
  
  background-image: url("data:image/svg+xml;charset=utf-8, \
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'> \
      <polygon points='0,0 60,0 30,40' style='fill:black;'/> \
    </svg>");
}

<select>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select style="font-size: 2rem;">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

Der Rest des Stils (Ränder, Polster, Farben usw.) ist ziemlich einfach.

Dies funktioniert in allen Browsern, die ich gerade ausprobiert habe (Firefox 50, Chrome 55, Edge 38 und Safari 10). Ein Hinweis zu Firefox ist, dass Sie, wenn Sie das #Zeichen in der Daten-URI verwenden möchten (z. B. fill: #000), es maskieren müssen ( fill: %23000).

select  {
    outline: 0;
    overflow: hidden;
    height: 30px;
    background: #2c343c;
    color: #747a80;
    border: #2c343c;
    padding: 5px 3px 5px 10px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 10px;
}

select option {border: 1px solid #000; background: #010;}

Benutzerdefiniert Wählen Sie CSS-Stile aus

Getestet in Internet Explorer (10 und 11), Edge, Firefox und Chrome

select::-ms-expand {
  display: none;
}
select {
  display: inline-block;
  box-sizing: border-box;
  padding: 0.5em 2em 0.5em 0.5em;
  border: 1px solid #eee;
  font: inherit;
  line-height: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  background-repeat: no-repeat;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 15px top 1em, right 10px top 1em;
  background-size: 5px 5px, 5px 5px;
}

<select name="">
  <option value="">Lorem</option>
  <option value="">Lorem Ipsum</option>
</select>

<select name="" disabled>
  <option value="">Disabled</option>
</select>

<select name="" style="color:red;">
  <option value="">Color!</option>
  <option value="">Lorem Ipsum</option>
</select>

Verwenden Sie die clipEigenschaft, um die Ränder und den Pfeil des selectElements zuzuschneiden, und fügen Sie dem Wrapper dann Ihre eigenen Ersatzstile hinzu:

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          select { position: absolute; clip:rect(2px 49px 19px 2px); z-index:2; }
          body > span { display:block; position: relative; width: 64px; height: 21px; border: 2px solid green;  background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
        </style>
      </head>
      <span>
        <select>
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
      </span>
    </html>

Verwenden Sie eine zweite Auswahl mit einer Deckkraft von Null, um die Schaltfläche anklickbar zu machen:

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          #real { position: absolute; clip:rect(2px 51px 19px 2px); z-index:2; }
          #fake { position: absolute; opacity: 0; }
    
          body > span { display:block; position: relative; width: 64px; height: 21px; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
        </style>
      </head>
      <span>
        <select id="real">
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
        <select id="fake">
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
      </span>
    </html>

Die Koordinaten unterscheiden sich zwischen Webkit und anderen Browsern, es handelt sich jedoch um eine @ media-Abfrage kann dies abdecken.

Verweise

• Dojo-FX-Tests: dojox.fx.ext-dojo.complex
• CSS-Maskierung: Testen Sie die Clip-Eigenschaft mit der Rect-Funktion und dem automatischen Werteclip für den Rahmen

Ein sehr schönes Beispiel, das den Trick verwendet :afterund :beforeausführt, ist das Styling Select Box mit CSS3 | CSSDeck

Das Bearbeiten dieses Elements wird nicht empfohlen, aber wenn Sie es ausprobieren möchten, ist es wie jedes andere HTML-Element.

Beispiel bearbeiten:

/* Edit select */
select {
    /* CSS style here */
}

/* Edit option */
option {
    /* CSS style here */
}

/* Edit selected option */
/* element  attr    attr value */
option[selected="selected"] {
    /* CSS style here */
}

<select>
    <option >Something #1</option>
    <option selected="selected">Something #2</option>
    <option >Something #3</option>
</select>

label {
    position: relative;
    display: inline-block;
}
select {
    display: inline-block;
    padding: 4px 3px 5px 5px;
    width: 150px;
    outline: none;
    color: black;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: lightblue;
}

Dies verwendet eine Hintergrundfarbe für ausgewählte Elemente und ich habe das Bild entfernt.

Ja. Sie können jedes HTML-Element anhand seines Tag-Namens wie folgt formatieren:

select {
  font-weight: bold;
}

Natürlich können Sie auch eine CSS-Klasse verwenden, um sie wie jedes andere Element zu formatieren:

<select class="important">
  <option>Important Option</option>
  <option>Another Important Option</option>
</select>

<style type="text/css">
  .important {
    font-weight: bold;
  }
</style>

Hier ist eine Lösung, die auf meinen Lieblingsideen aus dieser Diskussion basiert. Dies ermöglicht das direkte Stylen eines <select> -Elements ohne zusätzliches Markup.

Es funktioniert mit Internet Explorer 10 (und höher) mit einem sicheren Fallback für Internet Explorer 8/9. Eine Einschränkung für diese Browser ist, dass das Hintergrundbild positioniert und klein genug sein muss, um sich hinter dem nativen Erweiterungssteuerelement zu verstecken.

HTML

<select name='options'>
  <option value='option-1'>Option 1</option>
  <option value='option-2'>Option 2</option>
  <option value='option-3'>Option 3</option>
</select>

SCSS

body {
  padding: 4em 40%;
  text-align: center;
}

select {
  $bg-color: lightcyan;
  $text-color: black;
  appearance: none; // Using -prefix-free http://leaverou.github.io/prefixfree/
  background: {
    color: $bg-color;
    image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1255/caret--down-15.png");
    position: right;
    repeat: no-repeat;
  }
  border: {
    color: mix($bg-color, black, 80%);
    radius: .2em;
    style: solid;
    width: 1px;
    right-color: mix($bg-color, black, 60%);
    bottom-color: mix($bg-color, black, 60%);
  }
  color: $text-color;
  padding: .33em .5em;
  width: 100%;
}

// Removes default arrow for Internet Explorer 10 (and later)
// Internet Explorer 8/9 gets the default arrow which covers the caret
// image as long as the caret image is smaller than and positioned
// behind the default arrow
select::-ms-expand {
    display: none;
}

CodePen

http://codepen.io/ralgh/pen/gpgbGx

Ab Internet Explorer 10 können Sie mit der ::-ms-expandPseudoelementauswahl das Dropdown-Pfeilelement formatieren und ausblenden.

select::-ms-expand {
    display:none;
    /* or visibility: hidden; to keep it's space/hitbox */
}

Das verbleibende Design sollte anderen Browsern ähneln.

Hier ist eine grundlegende Abzweigung von Danields jsfiddle, die die Unterstützung für IE10 anwendet

Es gibt einen einfachen Weg.

Überprüfen Sie diese Geige und verzeihen Sie mir das Overstyling: https://jsfiddle.net/dkellner/7ac9us70/

Der Trick dahinter: Sobald das <select> -Tag eine Eigenschaft namens "size" erhält, verhält es sich wie eine Liste mit fester Höhe und ermöglicht es Ihnen plötzlich aus irgendeinem Grund, die Hölle daraus zu machen. Genau genommen ist die feste Liste ein Nebeneffekt - aber sie hilft uns nur mehr, weil wir sie für den "Dropdown-Look" verwenden.

Ein minimales Beispiel:

<style>

    .stylish span   {position:relative;}
    .stylish select {position:absolute;left:0px;display:none}

</style>
...
<div class="stylish">
    <label> Choose your superhero: </label>
    <span>
        <input onclick="$(this).closest('div').find('select').slideToggle(110)"><br>
        <select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">

            <optgroup label="Fantasy"></optgroup>
            <option value="1">  Gandalf        </option>
            <option value="2">  Harry Potter   </option>
            <option value="3">  Jon Snow       </option>

            <!-- ... and so on -->

        </select>
    </span>
</div>

(Um es einfach zu halten, habe ich es mit jQuery gemacht - aber Sie können das gleiche auch ohne machen)

Randnotizen

• Diese Lösung bietet Ihnen mehr als nur eine Auswahl: Der Wert kann auch manuell bearbeitet werden. Verwenden Sie die Eigenschaft readonly, wenn Sie die standardmäßige Auswahl mit eingeschränkter Auswahl bevorzugen.

• Um die Styling-Möglichkeiten zu maximieren, werden <optgroup> -Tags nicht verwendet um ihre Kinder, sind sie bewegt , bevor sie. Es ist beabsichtigt, es ist visuell klarer und sie arbeiten gerne so, keine Sorge.

• Javascripts: Ja, ich weiß, dass das OP "kein Javascript" sagte, aber ich habe es so verstanden, dass Sie sich bitte nicht mit Plugins beschäftigen , was in Ordnung ist. Sie brauchen keine Bibliotheken für diese. Nicht einmal jQuery, wie gesagt, es dient nur der Klarheit des Beispiels.

Sie sollten es auf jeden Fall wie in Styling Select, Optgroup und Optionen mit CSS tun . In vielerlei Hinsicht sind Hintergrundfarbe und Farbe genau das, was Sie normalerweise zum Stylen von Optionen benötigen, nicht die gesamte Auswahl.

Sie können der Dropdown-Liste auch einen Schwebestil hinzufügen.

select {position:relative; float:left; width:21.4%; height:34px; background:#f9f9e0; border:1px solid #41533f; padding:0px 10px 0px 10px; color:#41533f; margin:-10px 0px 0px 20px; background: transparent; font-size: 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #f9f9e0;}
select:hover {background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #fff;}

<html>
<head>
</head>
<body>
<select name="type" class="select"><option style="color:#41533f;" value="Select option">Select option</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</body>
</html>

Die dritte Methode in Danields Antwort kann verbessert werden, um mit Hover-Effekten und anderen Mausereignissen zu arbeiten. Stellen Sie einfach sicher, dass das "button" -Element direkt nach dem select-Element im Markup steht. Richten Sie es dann mit dem + CSS-Selektor aus:

HTML:

<select class="select-input">...</select>
<div class="select-button"></div>

CSS:

.select-input:hover+.select-button {
    <Hover styles here>
}

Dies zeigt jedoch den Hover-Effekt, wenn Sie irgendwo über dem Auswahlelement schweben, nicht nur über der "Schaltfläche".

Ich verwende diese Methode in Kombination mit Angular (da mein Projekt ohnehin eine Angular-Anwendung ist), um das gesamte Auswahlelement abzudecken, und lasse Angular den Text der ausgewählten Option im "button" -Element anzeigen. In diesem Fall ist es durchaus sinnvoll, dass der Hover-Effekt angewendet wird, wenn Sie irgendwo über der Auswahl schweben.

Ohne JavaScript funktioniert dies jedoch nicht. Wenn Sie dies tun möchten und Ihre Site ohne JavaScript arbeiten muss, sollten Sie sicherstellen, dass Ihr Skript die für die Erweiterung erforderlichen Elemente und Klassen hinzufügt. Auf diese Weise erhält ein Browser ohne JavaScript einfach eine normale, nicht gestaltete Auswahl anstelle eines gestalteten Abzeichens, das nicht korrekt aktualisiert wird.

Eine Lösung nur für CSS und HTML

Es scheint mit Chrome, Firefox und Internet Explorer 11 kompatibel zu sein. Bitte hinterlassen Sie jedoch Ihr Feedback zu anderen Webbrowsern.

Wie in Danields Antwort vorgeschlagen , verpacke ich meine Auswahl in ein Div (sogar zwei Divs aus Gründen der X-Browser-Kompatibilität), um das erwartete Verhalten zu erhalten.

Siehe http://jsfiddle.net/bjap2/

HTML:

<div class="sort-options-wrapper">
    <div class="sort-options-wrapper-2">
        <select class="sort-options">
                <option value="choiceOne">choiceOne</option>
                <option value="choiceOne">choiceThree</option>
                <option value="choiceOne">choiceFour</option>
                <option value="choiceFiveLongTestPurpose">choiceFiveLongTestPurpose</option>
        </select>
    </div>
    <div class="search-select-arrow-down"></div>
</div>

Beachten Sie die beiden Div-Wrapper.

Beachten Sie auch das zusätzliche Div, das hinzugefügt wurde, um den Pfeil nach unten zu platzieren, wo immer Sie möchten (absolut positioniert). Hier platzieren wir ihn links.

CSS

.sort-options-wrapper {
    display: inline-block;
    position: relative;
    border: 1px solid #83837F;
}

/* This second wrapper is needed for x-browser compatibility */
.sort-options-wrapper-2 {
    overflow: hidden;
}

select {
    margin-right: -19px; /* That's what is hiding the default-provided browser arrow */
    padding-left: 13px;
    margin-left: 0;
    border: none;
    background: none;

    /* margin-top & margin-bottom must be set since some
       browsers have default values for select elements */
    margin-bottom: 1px;
    margin-top: 1px;
}

select:focus {
    outline: none; /* Removing default browsers outline on focus */
}
.search-select-arrow-down {
    position: absolute;
    height: 10px;
    width: 12px;
    background: url(http://i.imgur.com/pHIYN06.png) scroll no-repeat 2px 0px;
    left: 1px;
    top: 5px;
}