Is er een CSS-only manier om een <select>dropdownmenu op te maken?
Ik moet een <select>-formulier zo veel mogelijk opmaken, zonder JavaScript. Wat zijn de eigenschappen die ik hiervoor kan gebruiken in CSS?
Deze code moet compatibel zijn met alle belangrijke browsers:
- Internet Explorer 6, 7 en 8
- Firefox
- Safari
Ik weet dat ik het kan maken met JavaScript: Voorbeeld.
En dan heb ik het niet over simpele styling. Ik wil weten wat we het beste kunnen doen met alleen CSS.
Ik heb vergelijkbare vragengevonden op Stack Overflow.
En dezeop Doctype.com.
Antwoord 1, autoriteit 100%
Hier zijn drie oplossingen:
Oplossing #1 – uiterlijk: geen – met Internet Explorer 10 – 11 tijdelijke oplossing (Demo)
—
Als u de standaardpijl wilt verbergen, stelt u appearance: nonein op het geselecteerde element en voegt u vervolgens uw eigen aangepaste pijl toe met background-image
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Remove default arrow */
background-image: url(...); /* Add custom arrow */
}
Browserondersteuning:
appearance: noneheeft een zeer goede browserondersteuning (caniuse) – behalve Internet Explorer.
We kunnen deze techniek verbeteren en ondersteuning toevoegen voor Internet Explorer 10 en Internet Explorer 11 door toe te voegen
select::-ms-expand {
display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}
Als Internet Explorer 9 een probleem is, kunnen we de standaardpijl niet verwijderen (wat zou betekenen dat we nu twee pijlen zouden hebben), maar we zouden een funky Internet Explorer 9-selector kunnen gebruiken.
Om in ieder geval onze aangepaste pijl ongedaan te maken – de standaard selectiepijl intact laten.
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background-image:none\9;
padding: 5px\9;
}
}
Allemaal samen:
Antwoord 2, autoriteit 22%
Het is mogelijk, maar helaas meestal in op WebKit gebaseerde browsers voor zover wij, als ontwikkelaars dat nodig hebben. Hier is het voorbeeld van CSS-styling verzameld uit het Chrome-optiepaneel via ingebouwde inspecteur voor ontwikkelaarstools, verbeterd om overeen te komen met de momenteel ondersteunde CSS-eigenschappen in de meeste moderne browsers:
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;
}
Als je deze code op een pagina in een op WebKit gebaseerde browser uitvoert, moet deze het uiterlijk van het selectievak veranderen, de standaard OS-pijl verwijderen en een PNG-pijl toevoegen, wat spaties voor en na het label plaatsen, bijna alles je wilt.
Het belangrijkste onderdeel is de eigenschap appearance, die verandert hoe het element zich gedraagt.
Het werkt perfect in bijna alle WebKit-gebaseerde browsers, inclusief mobiele, hoewel Gecko het appearanceniet zo goed ondersteunt als WebKit, zo lijkt het.
Antwoord 3, autoriteit 6%
Het select-element en de dropdown-functie zijnmoeilijk te stylen.
stijlkenmerken voor geselecteerd elementdoor Chris Heilmann bevestigt wat Ryan Dohery zei in een reactie op het eerste antwoord:
“Het select-element maakt deel uit van de
besturingssysteem, niet de browser chrome. Daarom is het erg
onbetrouwbaar in stijl, en het is niet per se zinvol om te proberen
hoe dan ook.”
Antwoord 4, autoriteit 5%
Ik had precies dit probleem, alleen kon ik geen afbeeldingen gebruiken en werd ik niet beperkt door browserondersteuning. Dit moet «op spec» zijn en met een beetje geluk begint het uiteindelijkoveral te werken.
Het gebruikt gelaagde, geroteerde achtergrondlagen om een vervolgkeuzepijl “uit te snijden”, omdat pseudo-elementen niet zouden werken voor het geselecteerde element.
Bewerken:in deze bijgewerkte versie gebruik ik CSS-variabelen en een klein themasysteem.
: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>Antwoord 5, Autoriteit 4%
De grootste inconsistentie die ik heb opgemerkt bij het opmaken van keuzemenu’s is Safarien Google Chromerendering (Firefox is volledig aanpasbaar via CSS). Na wat zoeken door obscure diepten van internet kwam ik het volgende tegen, dat mijn problemen met WebKit bijna volledig oplost:
Safari- en Google Chrome-oplossing:
select {
-webkit-appearance: none;
}
Hiermee wordt echter wel de vervolgkeuzepijl verwijderd. U kunt een vervolgkeuzepijl toevoegen met behulp van een nabijgelegen divmet een achtergrond, een negatieve marge of absoluut boven de geselecteerde vervolgkeuzelijst.
*Meer informatie en andere variabelen zijn beschikbaar in CSS-eigenschap: -webkit-appearance .
Antwoord 6, autoriteit 3%
<select>-tags kunnen worden gestileerd via CSS, net als elk ander HTML-element op een HTML-pagina die in een browser wordt weergegeven. Hieronder staat een (te eenvoudig) voorbeeld dat een select element op de pagina plaatst en de tekst van de opties in blauw weergeeft.
Voorbeeld HTML-bestand (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>
Voorbeeld CSS-bestand (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;
}
Antwoord 7, autoriteit 2%
Hier is een versie die in alle moderne browsers werkt. De sleutel gebruikt appearance:nonewaarmee de standaardopmaak wordt verwijderd. Omdat alle opmaak is verdwenen, moet je de pijl weer toevoegen die de selectie visueel onderscheidt van de invoer.
Werkvoorbeeld: 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>Antwoord 8, autoriteit 2%
Het blogpost Hoe te CSS Vorm Drop Down Style No Javascript Werkt voor mij, maar het faalt in Opera Hoewel:
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>Antwoord 9, Autoriteit 2%
Ik heb bij je cases gebruikt met behulp van bootstrap . Dit is de eenvoudigste oplossing die werkt:
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>Antwoord 10
In moderne browsers is het relatief eenvoudig om de <select>op te maken in CSS. Met appearance: noneis het enige lastige onderdeel het vervangen van de pijl (als je dat wilt). Hier is een oplossing die gebruikmaakt van een inline data:URI met platte tekst SVG:
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>Antwoord 11
Aangepaste CSS-stijlen selecteren
Getest in Internet Explorer (10 en 11), Edge, Firefox en 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>Antwoord 12
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;}
Antwoord 13
Gebruik de eigenschap clipom de randen en de pijl van het element selectbij te snijden en voeg vervolgens uw eigen vervangende stijlen toe aan de wrapper:
<!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(https://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>Antwoord 14
Dit element bewerken wordt niet aanbevolen, maar als je het wilt proberen, is het net als elk ander HTML-element.
Voorbeeld bewerken:
/* 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>
Antwoord 15
Een native oplossing
Controleer deze viool en vergeef me de overstyling: https://jsfiddle.net/dkellner/7ac9us70/
- Je kent alle elementen al
- Je kunt ze op de gebruikelijke manier stylen
- Er is weinig JS bij betrokken.
De truc erachter: zodra de <select> tag krijgt een eigenschap met de naam “size”, het zal zich gedragen als een lijst met vaste hoogte, en plotseling, om de een of andere reden, kun je er helemaal van gaan stylen. Strikt genomen is de vaste lijst een bijwerking – maar het helpt ons alleen maar meer omdat we het gebruiken voor de “vervolgkeuzelijst”.
Een minimaal voorbeeld:
<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>
(om het simpel te houden, ik deed het met jQuery – maar je kunt hetzelfde doen zonder)
Nevennoten
-
Deze oplossing geeft u meer dan alleen een selectie: de waarde kan ook handmatig worden bewerkt. Gebruik de readonly-eigenschap als u de voorkeur geeft aan de standaard select-beperkte manier.
-
Om de stylingmogelijkheden te maximaliseren, <optgroup> tags zijn niet in de buurtvan hun kinderen, ze worden vóórverplaatst. Het is opzettelijk, het is visueel duidelijker en ze werken graag zo, maak je geen zorgen.
-
Javascripts: ja ik weet dat de OP “geen Javascript” zei, maar ik begreep het als doe geen moeite met plug-ins, wat prima is. Je hebt hier geen bibliotheken voor nodig. Zelfs jQuery niet, zoals ik al zei, het is alleen voor de duidelijkheid van het voorbeeld.
Antwoord 16
Een heel mooi voorbeeld dat :afteren :beforegebruikt om de truc te doen, is in Styling Select Box met CSS3 | CSSDeck
Antwoord 17
Ja. U kunt elk HTML-element op de tagnaam stylen, zoals dit:
select {
font-weight: bold;
}
Natuurlijk kun je ook een CSS-klasse gebruiken om het op te maken, net als elk ander element:
<select class="important">
<option>Important Option</option>
<option>Another Important Option</option>
</select>
<style type="text/css">
.important {
font-weight: bold;
}
</style>
Antwoord 18
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;
}
Hiermee gebruikt u een achtergrondkleur voor geselecteerde elementen en ik heb de afbeelding verwijderd.
Antwoord 19
Hier is een oplossing op basis van mijn favoriete ideeën van deze discussie. Hierdoor kunnen styling a & lt; selecteer & gt; element direct zonder extra markup.
Het werkt Internet & Nbsp; Explorer & NBSP; 10 (en later) met een veilige fallback voor internet & nbsp; Explorer & NBSP; 8/9. Een voorbehoud voor deze browsers is dat de achtergrondafbeelding moet worden gepositioneerd en klein genoeg is om zich te verbergen achter de native expand-controle.
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
Antwoord 20
Je moet het zeker doen zoals in Styling select, optgroup en opties met CSS. In veel opzichten zijn achtergrondkleur en kleur precies wat je normaal gesproken nodig hebt om opties te stylen, niet de hele selectie.
Antwoord 21
Vanaf Internet Explorer 10 kunt u de ::-ms-expandpseudo-elementselector om het element met de vervolgkeuzepijl op te maken en te verbergen.
select::-ms-expand {
display:none;
/* or visibility: hidden; to keep it's space/hitbox */
}
De overige stijl moet vergelijkbaar zijn met die van andere browsers.
Hier is een basisvork van Danield’s jsfiddle die ondersteuning voor IE10 toepast
Antwoord 22
Je kunt ook een zweefstijl toevoegen aan de vervolgkeuzelijst.
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>Antwoord 23
De derde methode in Danield’s antwoordkan worden verbeterd om te werken met hover-effecten en andere muisgebeurtenissen. Zorg er wel voor dat het “button”-element direct na het select-element in de opmaak komt. Target het vervolgens met de + CSS-selector:
HTML:
<select class="select-input">...</select>
<div class="select-button"></div>
CSS:
.select-input:hover+.select-button {
<Hover styles here>
}
Hiermee wordt echter het zweefeffect weergegeven wanneer u ergens over het select-element zweeft, niet alleen over de “knop”.
Ik gebruik deze methode in combinatie met Angular (aangezien mijn project toch een Angular-toepassing is), om het hele select-element te dekken, en laat Angular de tekst van de geselecteerde optie weergeven in de “knop”- element. In dit geval is het volkomen logisch dat het hover-effect van toepassing is wanneer u ergens boven de select zweeft.
Het werkt echter niet zonder JavaScript, dus als u dit wilt doen en uw site moet zonder JavaScript werken, moet u ervoor zorgen dat uw script de elementen en klassen toevoegt die nodig zijn voor de verbetering. Op die manier krijgt een browser zonder JavaScript gewoon een normale, ongestileerde, select, in plaats van een gestileerde badge die niet correct wordt bijgewerkt.
Antwoord 24
Een oplossing met alleen CSS en HTML
Het lijkt compatibel met Chrome, Firefox en Internet Explorer 11. Maar laat alstublieft uw feedback over andere webbrowsers achter.
Zoals gesuggereerd door Danields antwoord , ik stop mijn select in een div (zelfs twee divs voor x-browsercompatibiliteit) om het verwachte gedrag te krijgen.
Zie 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>
Let op de twee div-wrappers.
Let ook op de extra div die is toegevoegd om de pijl-omlaag-knop te plaatsen waar je maar wilt (absoluut gepositioneerd), hier plaatsen we het aan de linkerkant.
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(https://i.imgur.com/pHIYN06.png) scroll no-repeat 2px 0px;
left: 1px;
top: 5px;
}