it-swarm.com.de

Wie erstelle ich ein <select> -Dropdown nur mit CSS?

Gibt es eine Nur-CSS-Möglichkeit, ein Dropdown-Menü <select> zu formatieren?

Ich muss eine <select> -Form ohne JavaScript so weit wie möglich menschlich gestalten. 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 am besten nur mit CSS machen können.

Ich habe ähnliche Fragen bei Stack Overflow gefunden.

Und dieser auf Doctype.com.

1214
Jitendra Vyas

Hier sind 3 Lösungen:

Lösung 1 - Erscheinungsbild: keine - mit Problemumgehung von ie10-11 ( Demo )

Um den Standardpfeil auszublenden, setzen Sie appearance: none auf das Auswahlelement und fügen Sie dann Ihren eigenen benutzerdefinierten Pfeil mit background-image hinzu.

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

Browser-Unterstützung:

appearance: none hat eine sehr gute Browserunterstützung ( caniuse ) - mit Ausnahme von ie11- und firefox 34-

Wir können diese Technik verbessern und Unterstützung für ie10 und ie11 hinzufügen, indem wir hinzufügen

select::-ms-expand { 
    display: none; /* hide the default arrow in ie10 and ie11 */
}

Wenn ie9 ein Problem ist - wir haben keine Möglichkeit, den Standardpfeil zu entfernen (was bedeutet, dass wir jetzt zwei Pfeile haben), aber wir könnten einen funky ie9-Selektor verwenden, um unseren benutzerdefinierten Pfeil zumindest rückgängig zu machen - und den Standardauswahlpfeil beizubehalten 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: IE hackery ahead */


select::-ms-expand { 
    display: none; /* remove default arrow in IE 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 verfügt über eine gute Browserunterstützung - sie sollte im Allgemeinen ausreichen.


Wenn Browserunterstützung für IE9- und Firefox 34- erforderlich ist, lesen Sie weiter ...

Lösung 2 Kürzen Sie das Auswahlelement, um den Standardpfeil auszublenden ( Demo )

(Lesen Sie hier mehr)

Wickeln Sie das select -Element in ein div mit einer festen Breite und overflow:hidden.

Geben Sie dem select -Element eine Breite von ungefähr 20 Pixel, die größer als das div ist.

Das Ergebnis ist, dass der Standard-Dropdown-Pfeil des Elements select (aufgrund des overflow:hidden im Container) ausgeblendet wird und Sie ein beliebiges Hintergrundbild auf der rechten Seite platzieren können. Seite der Div.

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

enter image description here

[Es sollte jedoch beachtet werden, dass, wenn das benutzerdefinierte Auswahlelement nur für MOBILE Geräte erforderlich ist, das obige Problem aufgrund der Art und Weise, wie jedes Telefon verwendet wird, nicht auftritt öffnet nativ das Auswahlelement. 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 IE unterstützen müssen, lesen Sie weiter ...

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

(Lesen Sie hier mehr)

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

Vorteil: Funktioniert gut in WebKit und Gecko. Es sieht auch gut aus (keine hervorstehenden option Elemente)

Nachteil: Internet Explorer (ab IE10) unterstützt pointer-events nicht, dh Sie können nicht auf den benutzerdefinierten Pfeil klicken. Ein weiterer (offensichtlicher) Nachteil bei dieser Methode ist, dass Sie Ihr neues Pfeilbild nicht mit einem Hover-Effekt oder Hand-Cursor anvisieren können, da wir gerade Zeigerereignisse für sie 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 conditional comments nicht mehr unterstützt: Wenn Sie diesen Ansatz verwenden möchten, sollten Sie wahrscheinlich Modernizr = verwenden. Es ist jedoch weiterhin möglich, das Zeigerereignis-CSS aus Internet Explorer 10 mit einem beschriebenen CSS-Hack auszuschließen hier .

.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]-->
953
Danield

Dies ist möglich, aber leider meistens in Webkit-basierten Browsern, sofern wir als Entwickler dies benötigen. Das folgende Beispiel zeigt das CSS-Styling, das im Optionsfeld Chrome über den integrierten Inspektor für Entwicklertools abgerufen wurde und mit den derzeit in den meisten modernen Browsern unterstützten CSS-Eigenschaften übereinstimmt:

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 Fx (3.6 to 15) */
    background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of IE 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 das Erscheinungsbild des Auswahlfelds geändert werden. Entfernen Sie den Standard-OS-Pfeil und fügen Sie einen PNG-Pfeil hinzu. Fügen Sie vor und nach dem Etikett Abstände ein, fast alles, was Sie möchten.

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

Es funktioniert perfekt in fast allen Webkit-basierten Browsern, einschließlich mobiler, obwohl Gecko anscheinend nicht appearance sowie Webkit unterstützt.

228
Matthew Morek

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

Stilattribute für ausgewählte Elemente von Chris Heilmann bestätigt, was Ryan Dohery in einem Kommentar zur ersten Antwort gesagt hat:

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

58
pavium

Die größte Inkonsistenz, die ich beim Stylen ausgewählter Dropdowns festgestellt habe, ist Safari und Google Chrome Rendering (Firefox ist durch CSS vollständig anpassbar). Nach einigem Durchsuchen der dunklen Tiefen des Internets bin ich auf Folgendes gestoßen, was meine Bedenken mit WebKit fast vollständig löst:

Safari und Google Chrome fix :

select {
  -webkit-appearance: none;
}

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

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

41
ioTus

<select> -Tags können wie jedes andere HTML-Element auf einer in einem Browser gerenderten HTML-Seite über CSS formatiert werden. Unten sehen Sie ein (zu einfaches) Beispiel, in dem ein ausgewähltes Element auf der Seite positioniert und der Text der Optionen in 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;
}
34
jeremyosborne

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

Edit: 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>
30
Henrik

Hier ist eine Version, die in allen modernen Browsern funktioniert. Der Schlüssel verwendet appearance:none, wodurch die Standardformatierung entfernt wird. Da die gesamte Formatierung weg ist, müssen Sie wieder in den Pfeil einfügen, der die Auswahl von der Eingabe optisch 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>
15
Eric

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

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>
13
Daniel

Ich bin mit Bootstrap zu deinem 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-down in SVG.

11
Yajo
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;}
9
gecko

In modernen Browsern ist es relativ einfach, den <select> in CSS zu formatieren. Bei appearance: none ist es nur schwierig, den Pfeil zu ersetzen (wenn Sie das möchten). Hier ist eine Lösung, die einen Inline-URI data: mit Nur-Text-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 Designs (Rahmen, 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). Eine Anmerkung zu Firefox ist, dass, wenn Sie das Zeichen # in der Daten-URI verwenden möchten (z. B. fill: #000), Sie es maskieren müssen (fill: %23000).

Verwenden Sie die Eigenschaft clip, um die Rahmen und den Pfeil des Elements select 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 ohne Deckkraft, 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, aber ein @ media query kann dies abdecken.

Referenzen

7
Paul Sweatte

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>
4
Homar

Ja. Sie können jedes HTML-Element nach seinem Tag-Namen 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>
4
Dave Ward

Ein sehr schönes Beispiel, das :after und :before verwendet, um den Trick auszuführen, ist in Styling Select Box mit CSS3 | CSSDeck

4
Ahmad Ajmi

Ab Internet Explorer 10 können Sie den Pseudoelement-Selektor ::-ms-expand verwenden, um das Dropdown-Pfeilelement zu formatieren und auszublenden.

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

Das restliche Design sollte anderen Browsern ähnlich sein.

Hier ist eine grundlegende Abzweigung von Danields jsfiddle, die IE10 unterstützt

3
Richard Szalay

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

Funktioniert mit IE10 + mit einem sicheren Fallback für IE8/9. Eine Einschränkung für diese Browser ist, dass das Hintergrundbild so positioniert und klein sein muss, dass es sich hinter dem nativen Erweiterungssteuerelement verbirgt.

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 IE10+
// IE 8/9 get dafault arrow which covers caret image
// as long as caret image is small than and positioned
// behind default arrow
select::-ms-expand {
    display: none;
}

Codepen

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

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

3
Lucky

Du solltest es auf jeden Fall so machen wie in Styling auswählen, optgroup und Optionen mit CSS. In vielerlei Hinsicht sind Hintergrundfarbe und Farbe genau das, was Sie normalerweise benötigen, um Optionen zu formatieren, nicht die gesamte Auswahl.

3
Otvazhnii

Es gibt IS eine Möglichkeit, SELECT-Tags zu formatieren.

Wenn das Tag einen "size" -Parameter enthält, wird fast jedes CSS angewendet. Mit diesem Trick habe ich eine Geige erstellt, die praktisch einem normalen Select-Tag entspricht, und der Wert kann manuell wie eine ComboBox in visuellen Sprachen bearbeitet werden (es sei denn, Sie geben readonly ein das Eingabe-Tag).

Hier ist ein minimales Beispiel, um das Prinzip dahinter zu sehen:
(Sie benötigen jQuery für den Klickmechanismus) :

<style>

    /* only these 2 lines are truly required */
    .stylish span {position:relative;}
    .stylish select {position:absolute;left:0px;display:none}

    /* now you can style the hell out of them */
    .stylish input    { ... }
    .stylish select   { ... }
    .stylish option   { ... }
    .stylish optgroup { ... }

</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="gandalf">Gandalf</option>
            <option value="harry">Harry Potter</option>
            <option value="jon">Jon Snow</option>

            <optgroup label="Comics"></optgroup>
            <option value="tony">Tony Stark</option>
            <option value="steve">Steven Rogers</option>
            <option value="natasha">Natasha Romanova</option>

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

Hier ist die Geige mit einigen weiteren Stilen: https://jsfiddle.net/dkellner/7ac9us70/

(Es ist natürlich überarbeitet, nur um die Möglichkeiten zu demonstrieren.)

Beachten Sie, dass Tags die unter ihnen enthaltenen Optionen nicht wie üblich kapseln. ja das ist beabsichtigt, es ist für das styling. (Der artige Weg wäre viel weniger stylisch.) Und ja, sie funktionieren auf diese Weise perfekt.

Bevor jemand auf den NO-JS-Teil hinweist: Ich kenne die Frage "kein Javascript". Für mich ist das eher wie , bitte kümmere dich nicht um Plugins, ich weiß, dass sie das können, aber ich brauche die native Art . Verstanden, keine Plugins, keine zusätzlichen Skripte enthalten, nur das, was in den "onclick" eines Tags passt. Die einzige Abhängigkeit ist jQuery, um den nativen Wahnsinn "document.parentNode.getElementsByTagName" zu vermeiden. Aber so kann es funktionieren. Ja, dies ist ein natives Select-Tag mit nativem Styling und einigen On-Click-Handlern. Es ist eindeutig keine "Javascript-Lösung".

Genießen!

2
dkellner

Eine reine CSS & HTML-Lösung

Ich scheine mit Chrome, Firefox und IE11 kompatibel zu sein. Bitte hinterlassen Sie jedoch Ihr Feedback zu anderen Webbrowsern.

Wie in der Antwort von @Danield vorgeschlagen, hülle ich meine Auswahl in ein div (aus Gründen der X-Browser-Kompatibilität sogar in zwei divs), um das erwartete Verhalten zu erzielen.

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 2 Div Wrapper. Beachten Sie auch das zusätzliche div, das hinzugefügt wurde, um den Pfeil-nach-unten-Knopf an einer beliebigen Stelle zu platzieren (absolut positioniert). Hier setzen 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 hidding the default-provided browser arrow */
    padding-left: 13px;
    margin-left: 0;
    border: none;
    background: none;
    /* margin-top & margin-bottom must be set since some browser 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;
}
0
Adrien Be

Benutzerdefiniert CSS-Stile auswählen

Getestet in IE (10, 11), Edge, FF, 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>
0
Roko C. Buljan

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>
0
user5340092

Die dritte Methode in Danields Antwort ( https://stackoverflow.com/a/13968900/280972 ) 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. Dann zielen Sie mit dem + CSS-Selektor darauf:

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 den Mauszeiger irgendwo über das Auswahlelement und nicht nur über die Schaltfläche bewegen.

Ich verwende diese Methode in Kombination mit Angular (da mein Projekt ohnehin eine Angular-App ist), um das gesamte Auswahlelement abzudecken, und lasse Angular den Text anzeigen der gewählten Option im "button" -Element. In diesem Fall ist es durchaus sinnvoll, dass der Hover-Effekt angewendet wird, wenn Sie den Mauszeiger irgendwo über die Auswahl bewegen. Es funktioniert jedoch nicht ohne Javascript. Wenn Sie dies tun möchten und Ihre Site ohne Javascript funktionieren muss, sollten Sie sicherstellen, dass Ihr Skript die für die Verbesserung 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.

0
Adrian Schmidt