Come faccio a stile un
-
19-09-2019 - |
Domanda
C'è un modo CSS solo per lo stile di una discesa <select>
?
ho bisogno per lo stile una forma <select>
per quanto umanamente possibile, senza alcuna JavaScript. Quali sono le proprietà che posso usare per farlo in CSS?
Questo codice deve essere compatibile con tutti i principali browser:
- Internet Explorer 6, 7, e 8
- Firefox
- Safari
So che posso farlo con JavaScript: Esempio .
E non sto parlando di stile semplice. Voglio sapere, ciò che il meglio che possiamo fare con i CSS solo.
domande simili su Stack Overflow.
questo su Doctype.com.
Soluzione
Qui ci sono tre soluzioni:
Soluzione # 1 - aspetto: nessuno - con Internet Explorer 10 - 11 workaround ( Demo )
-
Per nascondere il set appearance: none
freccia predefinito sull'elemento di selezione, quindi aggiungere la tua freccia personalizzato con background-image
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Remove default arrow */
background-image: url(...); /* Add custom arrow */
}
Supporto browser:
appearance: none
ha molto buon supporto del browser ( caniuse ) - ad eccezione di Internet Explorer 11 ( e successive) e Firefox 34 (e versioni successive).
Possiamo migliorare questa tecnica e aggiungere il supporto per Internet Explorer 10 e Internet Explorer 11 con l'aggiunta di
select::-ms-expand {
display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}
Se Internet Explorer 9 è una preoccupazione, non abbiamo modo di rimuovere la freccia di default (il che significherebbe che ora avremmo due frecce), ma, potremmo usare un funky selettore di Internet Explorer 9.
Per almeno annullare la nostra freccia personalizzato -. Lasciando intatto il select freccia predefinito
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background-image:none\9;
padding: 5px\9;
}
}
Tutti insieme:
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>
Questa soluzione è facile ed ha un buon supporto del browser -. Dovrebbe generalmente sufficiente
Se il supporto del browser per Internet Explorer 9 (e versioni successive) e Firefox 34 (e versioni successive) è necessario quindi continuare a leggere ...
Soluzione # 2 Tronca l'elemento di selezione per nascondere la freccia di default ( demo )
-
Avvolgere l'elemento select
in un div con un larghezza fissa e overflow:hidden
.
Poi dare l'elemento select
una larghezza di circa 20 pixel superiore al div .
Il risultato è che la freccia a discesa predefinita dell'elemento select
sarà nascosto (a causa della overflow:hidden
sul contenitore), ed è possibile inserire qualsiasi immagine di sfondo che si desidera a destra-mano-lato del div.
Il vantaggio di questo approccio è che è cross-browser (Internet Explorer 8 e versioni successive, WebKit e Gecko ). Tuttavia, la svantaggio di questo approccio è che le opzioni di discesa si protende sulla destra-mano-lato (dai 20 pixel che abbiamo nascosto ... perché gli elementi opzionali prendono la larghezza della selezionare elemento).
[Va notato, tuttavia, che se l'elemento di selezione personalizzato è necessaria solo per i dispositivi mobili - allora il problema di cui sopra non si applica - a causa del modo in cui ogni telefono si apre in modo nativo select elemento. Così per il mobile, questa potrebbe essere la soluzione migliore.]
.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>
Se la freccia personalizzato è necessario in Firefox - prima Versione 35 -, ma non è necessario per supportare le vecchie versioni di Internet Explorer - allora continuate a leggere ...
Soluzione # 3 - Utilizzare la proprietà pointer-events
( demo )
-
L'idea è quella di sovrapporre un elemento sopra la goccia nativo freccia giù (per creare la nostra personalizzato uno) e quindi non consentire eventi del puntatore su di esso.
Vantaggio: Funziona bene in WebKit e Gecko. Sembra buono troppo (senza elementi sporgenti option
).
Svantaggi: Internet Explorer (Internet Explorer 10 e verso il basso) non supporta pointer-events
, che significa che non è possibile fare clic sulla freccia personalizzato. Inoltre, un altro (ovvio) svantaggio di questo metodo è che non è possibile indirizzare la vostra immagine Freccia nuovo con un effetto hover o cursore a mano, perché abbiamo eventi del puntatore solo disabili su di loro!
Tuttavia, con questo metodo è possibile utilizzare modernizzatore o commenti condizionali per rendere Internet Explorer ripristinare lo standard costruito in freccia.
NB: Essendo che Internet Explorer 10 non supporta conditional comments
più: se si desidera utilizzare questo approccio, probabilmente si dovrebbe usare Modernizr . Tuttavia, è ancora possibile escludere il puntatore-eventi CSS da Internet Explorer 10 con un hack CSS descritto qui .
.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]-->
Altri suggerimenti
E 'possibile, ma purtroppo per lo più in browser basati su WebKit nella misura noi, come sviluppatori, richiediamo. Ecco l'esempio di stile CSS raccolte da Chrome pannello delle opzioni via built-in strumenti di sviluppo ispettore, migliorato per abbinare proprietà CSS attualmente supportati nella maggior parte dei browser moderni:
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;
}
Quando si esegue questo codice su qualsiasi pagina all'interno di un browser basato su WebKit dovrebbe cambiare l'aspetto della casella di selezione, rimuovere standard di OS-freccia e aggiungere un PNG-freccia, mettere un po 'la spaziatura prima e dopo l'etichetta, quasi nulla si desidera.
La parte più importante è di proprietà appearance
, che cambia come l'elemento si comporta.
Funziona perfettamente in quasi tutti i browser basato su WebKit, inclusi quelli mobili, anche se Gecko non supporta appearance
così come WebKit, a quanto pare.
L'elemento di selezione e la sua caratteristica discesa sono difficile da stile.
per selezionare elemento da Chris Heilmann conferma quello che ha detto Ryan Dohery in un commento alla prima risposta:
"L'elemento di selezione fa parte del sistema operativo, non il browser Chrome. Pertanto, è molto inaffidabili allo stile, e non necessariamente ha senso provare in ogni caso ".
Il più grande incoerenza che ho notato quando lo styling selezionare menù a discesa è Safari e Google Chrome di rendering (Firefox è completamente personalizzabile tramite CSS). Dopo qualche ricerca attraverso oscure profondità di Internet mi sono imbattuto nel seguente, che si risolve quasi completamente i miei scrupoli con WebKit:
Safari e Google Chrome fix :
select {
-webkit-appearance: none;
}
Questa, tuttavia, rimuovere la freccia a discesa. È possibile aggiungere un menù a tendina con un div
vicino con uno sfondo, margine negativo o posizionato in modo assoluto sulla select discesa.
* Maggiori informazioni e le altre variabili sono disponibili in proprietà CSS: -webkit-aspetto .
tag <select>
può essere uno stile tramite CSS proprio come qualsiasi altro elemento HTML in una pagina HTML visualizzato in un browser. Qui di seguito è una (troppo semplice) esempio che posizionare un elemento di selezione sulla pagina e rendere il testo delle opzioni in blu.
Esempio di file HTML (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>
Esempio di file CSS (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;
}
Ho avuto questo problema esatto, tranne che non ho potuto utilizzare le immagini e non è stato limitato da supporto del browser. Questo dovrebbe essere «su spec» e con la fortuna iniziare a lavorare ovunque eventualmente .
Si utilizza strati livelli di sfondo ruotata di «ritagliare» un menù a tendina, come pseudo-elementi non funzionerebbero per l'elemento di selezione.
Modifica:. In questa versione aggiornata sto usando variabili CSS e un sistema di tematizzazione piccolo
: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>
Ecco una versione che funziona in tutti i browser moderni. La chiave sta usando appearance:none
che rimuove la formattazione predefinita. Dal momento che tutta la formattazione è andato, è necessario aggiungere di nuovo nella freccia che differenzia visivamente il select dall'ingresso.
Esempio di applicazione: 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>
Il post sul blog Come modulo CSS discesa stile senza JavaScript funziona per me, ma non riesce a Opera però:
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>
ho avuto modo di tuo caso utilizzando Bootstrap . Questa è la soluzione più semplice che funziona:
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>
. Nota: la roba Base64 è 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;}
Nel browser moderni è relativamente indolore per lo stile della <select>
in CSS. Con appearance: none
l'unica parte difficile sta sostituendo la freccia (se è quello che volete). Ecco una soluzione che utilizza un data:
linea URI con testo in chiaro in formato 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>
Il resto della styling (bordi, padding, colori, ecc) è abbastanza semplice.
Questo funziona in tutti i browser Ho appena provato (Firefox 50, Chrome 55, Riva 38, e Safari 10). Una nota su Firefox è che se si desidera utilizzare il carattere #
l'URI di dati (per esempio fill: #000
) è necessario sfuggire (fill: %23000
).
Utilizzare la proprietà clip
per ritagliare i confini e la freccia dell'elemento select
, quindi aggiungere i propri stili di ricambio ai 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(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>
usare un secondo selezionare con opacità pari a zero per rendere il pulsante cliccabile:
<!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>
coordinate differiscono Webkit e altri browser, ma un @media interrogazione in grado di coprire questo.
Riferimenti
Un esempio molto bello che utilizza :after
e :before
per fare il trucco è in Styling Select Box con CSS3 | CSSDeck
Sì. Si può stile qualsiasi elemento HTML con il suo nome di tag, in questo modo:
select {
font-weight: bold;
}
Naturalmente, è anche possibile utilizzare una classe CSS per lo stile che, come ogni altro elemento:
<select class="important">
<option>Important Option</option>
<option>Another Important Option</option>
</select>
<style type="text/css">
.important {
font-weight: bold;
}
</style>
Modifica questo elemento non è raccomandato, ma se volete provare è come qualsiasi altro elemento HTML.
Modifica esempio:
/* 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>
È sicuramente dovrebbe fare come in Styling selezionare, optgroup e opzioni con i CSS . In molti modi, background-color e colore sono proprio quello che ci tipicamente bisogno di opzioni di stile, non l'intera selezione.
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;
}
Questa utilizza un colore di sfondo per selezionare gli elementi e ho rimosso l'immagine ..
Come di Internet Explorer 10, è possibile utilizzare il ::-ms-expand
pseudo elemento selettore di stile, e nascondere, il menu a discesa elemento freccia.
select::-ms-expand {
display:none;
/* or visibility: hidden; to keep it's space/hitbox */
}
Lo stile restante dovrebbe essere simile agli altri browser.
Ecco una forchetta base di jsfiddle di DanielD che si applica il supporto per IE10
Ecco una soluzione basata sulle mie idee preferite di questa discussione. Questo permette styling un elemento
Funziona Internet Explorer 10 (e versioni successive) con un fallback di sicurezza per Internet Explorer 8/9. Un avvertimento per questi browser è che l'immagine di sfondo deve essere posizionato ed essere abbastanza piccolo da nascondersi dietro il controllo nativo espandersi.
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
C'è un modo per stile tag SELECT.
Se c'è un parametro "size" nel tag, si applica quasi tutti i CSS. Usando questo trucco, ho creato un violino che è praticamente equivalente a un normale tag select, più il valore può essere modificato manualmente come un ComboBox in linguaggi visivi (a meno che non si mette in sola lettura nel tag di ingresso).
Quindi, ecco un esempio minimo di vedere il principio alla base:
(avrete bisogno di jQuery per il meccanismo di clic) :
<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>
Ecco il violino con alcune più stili: https://jsfiddle.net/dkellner/7ac9us70/
(E 'overstyled naturalmente, solo per dimostrare le possibilità.)
Si noti come tag non incapsulano le opzioni appartenenti sotto di loro, come avviene normalmente dovrebbero; sì questo è intenzionale, è per lo styling. (Il modo in cui ben educato sarebbe molto meno stylable.) E sì che funzionano perfettamente in questo modo.
Prima che qualcuno fa notare la parte NO-JS: So che la domanda ha detto "no Javascript". Per me, questo è più come si prega di non perdere tempo con i plugin, so che può farlo, ma ho bisogno del modo nativo . Capito, nessun plug-in, nessuno script aggiuntivi inclusi, solo ciò che si inserisce all'interno di un tag "onclick". L'unica dipendenza è jQuery, per evitare la follia nativo "document.parentNode.getElementsByTagName". Ma si può lavorare in questo modo. Quindi sì, questo è un tag select nativa con stile nativo e alcuni gestori onclick. Non è chiaramente "una soluzione Javascript".
Enjoy!
È inoltre possibile aggiungere uno stile hover alla discesa.
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>
A CSS e unica soluzione HTML
Sembra compatibile con Chrome, Firefox e Internet Explorer 11. Ma si prega di lasciare il tuo feedback per quanto riguarda gli altri browser web.
Come suggerito da risposta di DanielD , avvolgo il mio selezionare in un div (anche due div per la compatibilità x-browser) per ottenere il comportamento previsto.
Vedi 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>
Si notino i due involucri div.
notare anche l'extra div aggiunto per posizionare il pulsante con la freccia verso il basso dove si vuole (posizionati in modo assoluto), qui mettiamo a sinistra.
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;
}
Il terzo metodo in DanielD di rispondere può essere migliorata per lavorare con hover-effetti e altri eventi del mouse. Basta fare in modo che il -element "pulsante" viene subito dopo l'elemento di selezione nella marcatura. Poi bersaglio utilizzando il selettore + CSS:
HTML:
<select class="select-input">...</select>
<div class="select-button"></div>
CSS:
.select-input:hover+.select-button {
<Hover styles here>
}
Questa volontà, tuttavia, mostrano l'effetto hover quando si passa da nessuna parte sul select-elemento, non appena oltre il "pulsante".
Sto usando questo metodo in combinazione con angolare (dal mio progetto sembra essere un'applicazione angolare in ogni caso), per coprire l'intero select-elemento, e lasciare visualizzazione angolare il testo dell'opzione selezionata nel "tasto" - elemento. In questo caso ha perfettamente senso che l'hover-effetto si applica quando si libra ovunque sopra la selezione.
Non funziona senza JavaScript però, quindi se si vuole fare questo, e il tuo sito deve lavorare senza JavaScript, è necessario assicurarsi che lo script aggiunge gli elementi e le classi necessarie per la valorizzazione. In questo modo, un browser senza JavaScript semplicemente ottenere un normale, senza stile, selezionare, invece di un distintivo stile che non aggiorna correttamente.
stili personalizzati Seleziona CSS
Testato in Internet Explorer (10 e 11), Riva, Firefox e 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>