Wie stylen ich ein
-
19-09-2019 - |
Frage
Gibt es eine CSS-einzige Möglichkeit, einen <select>
Drop-Down stylen?
Ich brauche so viel wie nur irgend möglich, eine <select>
Form, Stil, ohne JavaScript. Was die Eigenschaften sind kann ich so in CSS tun?
muss dieser Code mit allen gängigen Browsern kompatibel sein:
- Internet Explorer 6, 7 und 8
- Firefox
- Safari
Ich weiß, dass ich es mit JavaScript machen kann: Beispiel .
Und ich spreche nicht über einfaches Styling. Ich will wissen, was das Beste, was wir nur mit CSS tun können.
Ich fand ähnliche Fragen auf Stack-Überlauf.
Und diese auf Doctype.com.
Lösung
Hier sind drei Lösungen:
Lösung 1 - Aussehen: keine - mit Internet Explorer 10 - 11 Abhilfe ( Demo )
-
Um den Standard-Pfeil Satz appearance: none
auf dem select-Element zu verstecken, dann fügen Sie Ihren eigenen Pfeil mit background-image
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 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 die Unterstützung für Internet Explorer 10 und Internet Explorer 11 durch Hinzufügen
select::-ms-expand {
display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}
Wenn Internet Explorer 9 ein Anliegen ist, haben wir keine Möglichkeit, den Standard-Pfeil zu entfernen (was bedeuten würde, dass wir nun zwei Pfeile haben würden), aber wir ein flippiges Internet Explorer 9 Selektor verwenden könnten.
zumindest Um unseren eigenen Pfeil rückgängig machen -. Verlassen des Standardauswahlpfeils 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 hat die Unterstützung gute Browser -. Es sollte in der Regel genügen
Wenn Browser-Unterstützung für Internet Explorer 9 (und höher) und Firefox 34 (und höher) notwendig ist, dann lesen Sie ...
Lösung 2 Kürzen das select-Element den Standardpfeil ( Demo ) zu verbergen
-
Wickeln Sie das select
Element in einem div mit einer fester Breite und overflow:hidden
.
Dann gibt dem select
Elemente eine Breite von etwa 20 Pixel größer ist als die div .
Das Ergebnis ist, dass der Standard Dropdown-Pfeil des select
Elements wird (aufgrund der overflow:hidden
auf den Behälter) versteckt werden, und Sie können eine beliebige Hintergrundbild platzieren Sie auf der rechten Seite des div wollen.
Die Vorteil: dieses Ansatzes ist, dass es Cross-Browser (Internet Explorer 8 und höher, WebKit und Gecko ). Allerdings ist die Nachteil dieses Ansatzes besteht darin, dass die Optionen im Dropdown-ragt auf der rechten Handseite (von den 20 Pixeln, die wir versteckt ... weil die Option Elemente, die die Breite des nehmen select-Element).
[Es sollte beachtet werden, jedoch, dass, wenn das benutzerdefinierte select-Element ist nur erforderlich für Mobile Geräte - dann wird das oben beschriebene Problem gilt nicht - wegen der Art und Weise jedes Telefon öffnet nativ die Auswahl Element. So für die mobilen, kann dies die beste Lösung sein.]
.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 ist notwendig, auf Firefox - vor Version 35 - aber Sie brauchen keine alten Versionen von Internet Explorer zu unterstützen - dann lesen Sie ...
Lösung # 3 - Verwenden Sie die pointer-events
Eigenschaft ( Demo )
-
hier Die Idee ist, ein Element über die nativen Dropdown-Pfeil zu überlagern (unsere eigenen erstellen) und dann Zeiger Ereignisse auf mich nicht zulassen.
Vorteil: Es funktioniert gut in WebKit und Gecko. Es sieht auch gut (keine ragte option
Elemente).
Nachteil: Internet Explorer (Internet Explorer 10 und unten) nicht unterstützt pointer-events
, was bedeutet, dass Sie nicht den benutzerdefinierten Pfeil klicken. Auch eine andere (offensichtlich) Nachteil bei dieser Methode ist, dass Sie nicht Ihren neuen Pfeil Bild mit einer Hover-Effekt oder Hand-Cursor ausrichten können, weil wir nur deaktiviert Zeiger Ereignisse auf sie haben!
Doch mit dieser Methode können Sie Modernisierer oder bedingte Kommentare verwenden, um Internet Explorer auf den Standard in Pfeil gebaut machen zurück.
Hinweis: zu sein, dass Internet Explorer 10 nicht conditional comments
unterstützt mehr: Wenn Sie diesen Ansatz verwenden möchten, sollten Sie wahrscheinlich verwenden Modernizr . Es ist jedoch immer noch möglich, das Zeiger-Ereignisse CSS von Internet Explorer 10 mit einem CSS-Hack beschrieben hier 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]-->
Andere Tipps
Es ist möglich, aber leider meist in WebKit-basierten Browsern, soweit wir als Entwickler benötigen. Hier ist das Beispiel von CSS Styling von Chrome Optionen Panel über integrierte Entwicklertools Inspektor gesammelt, verbessert derzeit Eigenschaften unterstützt CSS in den meisten modernen Browsern entsprechen:
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 einem beliebigen Seite in einem WebKit-basierten Browser starten sollte es das Aussehen der Auswahlbox ändern, entfernen Sie Standard-OS-Pfeil und fügen Sie einen PNG-Pfeil, legt etwas Abstand vor und nach dem Etikett, fast alles Sie wollen.
Der wichtigste Teil ist appearance
Eigenschaft, die sich ändert, wie das Element verhält.
Es funktioniert perfekt in fast all WebKit-basierten Browser, einschließlich mobiler diejenigen, obwohl Gecko nicht appearance
sowie WebKit unterstützen, wie es scheint.
Das Auswahlelement und seine Drop-Down-Funktion sind schwer zu Stil.
Stilattribute für ausgewähltes Element von Chris Heilmann bestätigt, was Ryan Dohery sagte in einem Kommentar zu der ersten Antwort:
"Das Auswahlelement ist ein Teil der Betriebssystem, der Browser Chrom. Daher ist es sehr unzuverlässig Stil, und es muss nicht unbedingt sinnvoll, um zu versuchen, jedenfalls. "
Die größte Inkonsistenz ich bemerkt habe, wenn das Auswahl Dropdown-Listen Styling ist Safari und Google Chrome Rendering (Firefox ist vollständig anpassbar durch CSS). Nach einiger Suche durch obskure Tiefen des Internet stieß ich auf dem folgende, die fast meine Skrupel mit WebKit vollständig aufgelöst:
Safari und Google Chrome fix :
select {
-webkit-appearance: none;
}
Dies bedeutet jedoch, entfernen Sie den Dropdown-Pfeil. Sie können ein Dropdown-Pfeil mit einem in der Nähe div
fügen mit einem Hintergrund, negative Marge oder absolut über die Auswahl Dropdown positioniert.
* Weitere Informationen und andere Variablen sind in CSS-Eigenschaft: -webkit-Auftritt .
<select>
-Tags können in einem Browser dargestellt wie jede andere HTML-Element auf einer HTML-Seite durch CSS gestylt werden. Nachfolgend finden Sie ein (allzu einfaches) Beispiel, das ein ausgewähltes Element auf der Seite und machen Sie den Text der Optionen in blau positionieren.
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;
}
Ich hatte genau dieses Problem, es sei denn ich keine Bilder verwenden konnte und wurde von Browser-Unterstützung beschränkt. Dies sollte «auf spec» sein und mit etwas Glück beginnt überall arbeiten schließlich .
Es verwendet geschichtete gedreht Hintergrund Schichten «geschnitten», um einen Dropdown-Pfeil, als Pseudo-Elemente würden für das select-Element nicht.
Edit:. In dieser aktualisierten Version I CSS-Variablen und ein winziges Theming-System benutzen
: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>
Hier ist eine Version, die in allen modernen Browsern funktioniert. Der Schlüssel wird mit appearance:none
, die die Standardformatierung entfernt. Da alle Formatierungen weg ist, müssen Sie in den Pfeil wieder hinzufügen, die visuell die Auswahl vom Eingang 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>
Der Blog-Eintrag Wie CSS Form Drop-Down-Stil kein JavaScript für mich funktioniert, aber es funktioniert nicht in Opera aber:
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>
Ich habe auf Ihren Fall mit Bootstrap . 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 fa-chevron-down
in SVG
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;}
In modernen Browsern ist es relativ schmerzlos die <select>
in CSS stylen. Mit appearance: none
die einzige schwierige Teil ersetzt den Pfeil (wenn es das ist, was Sie wollen). Hier ist eine Lösung, die ein 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 Styling (Grenzen, Polster, Farben, etc.) ist recht einfach.
Dies funktioniert in allen Browsern Ich habe gerade versucht (Firefox 50, Chrome 55, Edge-38 und Safari 10). Eine Anmerkung über Firefox ist, dass, wenn Sie die #
Zeichen in der Daten-URI verwendet werden soll (z fill: #000
) benötigen Sie es zu entkommen (fill: %23000
).
Mit der clip
Eigenschaft, um die Grenzen zuschneiden und auf den Pfeil des select
Element, dann fügen Sie Ihre eigenen Ersatz Stile der Verpackung:
<!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 mit Null Opazität wählen Sie die Schaltfläche anklickbar 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>
Koordinaten unterscheidet zwischen Webkit und anderen Browsern, aber eine @media Abfrage kann man erkennen, abdecken.
Referenzen
Ein sehr schönes Beispiel, das Ja. Sie können durch ihren Tag-Namen jedes HTML-Element Stil, wie folgt aus: Natürlich können Sie auch eine CSS-Klasse verwenden es, um Stil, wie jedes andere Element: :after
und :before
verwendet der Trick zu tun ist, in
select {
font-weight: bold;
}
<select class="important">
<option>Important Option</option>
<option>Another Important Option</option>
</select>
<style type="text/css">
.important {
font-weight: bold;
}
</style>
Bearbeiten dieses Element nicht zu empfehlen, aber wenn Sie es wie jedes andere HTML-Element versuchen.
Bearbeiten Beispiel:
/* 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>
Sie auf jeden Fall sollte es tun wie in Styling wählen, optgroup und Optionen mit CSS . In vielerlei Hinsicht Hintergrund-Farbe und Farbe ist genau das, was Sie in der Regel zu Artwahlen benötigen würden, nicht das gesamte wählen.
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;
}
Dieser verwendet eine Hintergrundfarbe für ausgewählte Elemente und ich entfernte das Bild ..
Wie der Internet Explorer 10, können Sie die ::-ms-expand
Pseudo Elementselektoreinrichtung zu Stil und auszublenden, die Dropdown-Pfeil-Element.
select::-ms-expand {
display:none;
/* or visibility: hidden; to keep it's space/hitbox */
}
Der verbleibende Styling sollte andere Browser ähnlich sein.
Hier ist eine grundlegende Gabel von jsfiddle DanielD der die Unterstützung gilt für IE10
Hier ist eine Lösung auf meine Lieblings-Ideen aus dieser Diskussion basiert. Dies ermöglicht ein
Es funktioniert Internet Explorer 10 (und höher) mit einem sicheren Rückfall für Internet Explorer 8/9. Ein Nachteil für diese Browser ist, dass das Hintergrundbild positioniert werden muss, und klein genug, um hinter dem nativen erweitert Kontrolle zu verbergen.
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
Es gibt einen Weg, um Stil SELECT-Tags.
Wenn es eine „Größe“ Parameter in dem Tag, fast jede CSS gelten. Mit diesem Trick, ich habe eine Geige geschaffen, die zu einem normalen Tag select praktisch gleichwertig ist, und der Wert kann wie eine ComboBox in der visuellen Sprachen manuell bearbeitet werden (es sei denn, Sie setzen Read-only in dem Eingabe-Tag).
Hier ist also ein minimales Beispiel das Prinzip, um zu sehen:
(Sie jQuery benötigen für den Klick-Mechanismus) :
<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 ein paar mehr Arten: https://jsfiddle.net/dkellner/7ac9us70/
(Es ist overstyled natürlich nur die Möglichkeiten zu demonstrieren.)
Beachten Sie, wie Tags kapseln nicht die Optionen unter ihnen gehören, wie sie in der Regel sollte; ja dies beabsichtigt ist, ist es für das Styling. (Die gut erzogene Weise viel weniger frisierbar sein würde.) Und ja sie funktionieren sehr gut, auf diese Weise.
Bevor jemand den NO-JS Teil weist darauf hin: Ich weiß, sagt die Frage "nein Javascript". Für mich ist diese eher wie ist bitte nicht stören mit Plugins, ich weiß sie es tun können, aber ich brauche die native Weg . Zu verstehen, kein Plug-in enthielten keine zusätzlichen Skripte, nur das, was innerhalb eines Tags „Onclick“ paßt. Die einzige Abhängigkeit ist jQuery, die native „document.parentNode.getElementsByTagName“ Wahnsinn zu vermeiden. Aber es kann auf diese Weise arbeiten. Also ja, das ist ein nativer select-Tag mit einheimischem Styling und einig Onclick-Handler. Es ist eindeutig nicht „eine Javascript-Lösung“.
Genießen Sie!
Sie können auch einen Hover-Stil auf die Drop-Down-hinzuzufü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>
Ein CSS und HTML einzige Lösung
Es scheint kompatibel mit Chrome, Firefox und Internet Explorer 11. Aber bitte Ihr Feedback zu anderen Web-Browser verlassen.
Wie von DanielD Antwort vorgeschlagen , ich lege meine select in einem div (sogar zwei divs für 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.
Auch die zusätzlichen div bemerken hinzugefügt, um den Pfeil-unten-Taste zu platzieren, wo immer Sie (positionieren absolut) mögen, hier setzten wir es auf der linken Seite.
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;
}
Die dritte Methode in DanielD der beantworten kann verbessert werden, mit Hover-Effekten und anderen Mausereignissen zu arbeiten. So stellen Sie sicher, dass das „Button“ -Element im Markup direkt nach dem select-Elemente kommt. Dann zielen sie den + CSS-Selektor verwenden:
HTML:
<select class="select-input">...</select>
<div class="select-button"></div>
CSS:
.select-input:hover+.select-button {
<Hover styles here>
}
Dies wird zeigen jedoch den Hover-Effekt, wenn überall über das select-Element schwebt, nicht nur über den "Button".
Ich bin mit dieser Methode in Kombination mit kantigem (da meinem Projekt geschieht eine Angular Anwendung ohnehin sein), das gesamte select-Element zu bedecken, und lassen Sie Angular Display den Text der ausgewählten Option in dem „Knopf“ - Element. In diesem Fall macht es durchaus Sinn, dass der Hover-Effekt gilt, wenn überall auf der Auswahl schwebt.
Es funktioniert ohne JavaScript nicht aber so, wenn Sie dies tun wollen, und Ihre Website hat, ohne JavaScript zu arbeiten, sollten Sie sicherstellen, dass Ihr Skript die Elemente und Klassen, die für die Erweiterung hinzufügt. Auf diese Weise ist ein Browser ohne JavaScript einfach ein normales, ungeschminkt, wählen Sie bekommen, anstelle eines gestylt Abzeichen, die nicht korrekt aktualisiert werden.
Benutzerdefiniert Wählen Sie CSS-Stile
Getestet in Internet Explorer (10 und 11), Rand, 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>