Comment puis-je le style d'un
-
19-09-2019 - |
Question
Y at-il un moyen CSS seulement pour le style d'un menu déroulant <select>
?
Je dois le style d'un formulaire de <select>
autant qu'il est humainement possible, sans JavaScript. Quelles sont les propriétés que je peux utiliser pour le faire en CSS?
Ce code doit être compatible avec tous les navigateurs:
- Internet Explorer 6, 7, et 8
- Firefox
- Safari
Je sais que je peux le faire avec JavaScript: Exemple .
Et je ne parle pas de style simple. Je veux savoir, quel est le meilleur que nous pouvons faire avec CSS seulement.
Je trouve questions similaires sur Stack Overflow.
celui-ci sur Doctype.com.
La solution
Voici trois solutions:
Solution # 1 - apparence: aucun - avec Internet Explorer 10 - 11 solution de contournement ( Demo )
-
Pour masquer l'ensemble flèche par défaut appearance: none
sur l'élément de sélection, puis ajoutez votre propre flèche personnalisée avec background-image
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Remove default arrow */
background-image: url(...); /* Add custom arrow */
}
Support du navigateur:
appearance: none
a un très bon soutien du navigateur ( caniuse ) - sauf pour Internet Explorer 11 ( et par la suite) et Firefox 34 (et plus tard).
Nous pouvons améliorer cette technique et ajouter le support pour Internet Explorer 10 et Internet Explorer 11 en ajoutant
select::-ms-expand {
display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}
Si Internet Explorer 9 est une préoccupation, nous avons aucun moyen d'enlever la flèche par défaut (ce qui voudrait dire que nous aurions maintenant deux flèches), mais nous pourrions utiliser funky sélecteur Internet Explorer 9.
Pour au moins annuler notre flèche personnalisée -. Laissant la valeur par défaut flèche de sélection intacte
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background-image:none\9;
padding: 5px\9;
}
}
Tous ensemble:
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>
Cette solution est facile et a un bon support du navigateur -. Il devrait généralement suffire
Si le support du navigateur pour Internet Explorer 9 (et versions ultérieures) et Firefox 34 (et versions ultérieures) est nécessaire alors continuer à lire ...
Solution # 2 tronquer l'élément de sélection pour masquer la flèche par défaut ( démo )
-
Envelopper l'élément de select
dans un div avec un largeur fixe et overflow:hidden
.
Ensuite, donner à l'élément de select
une largeur d'environ 20 pixels plus grand que le div .
Le résultat est que la flèche déroulante par défaut de l'élément select
sera caché (en raison du overflow:hidden
sur le récipient), et vous pouvez placer une image de fond que vous voulez sur la droite côté de la div.
avantage de cette approche est qu'il est multi-navigateur (Internet Explorer 8 et versions ultérieures, WebKit et Gecko ). Cependant, le désavantage de cette approche est que les options déroulantes s'avance sur la droite (par les 20 pixels que nous Hid ... parce que les éléments d'option prennent la largeur de la élément de sélection).
[Il convient de noter toutefois que si l'élément de sélection sur mesure est nécessaire que pour appareils mobiles - le problème ci-dessus ne concerne pas - à cause de la façon dont chaque téléphone ouvre nativement la sélection élément. Donc, pour mobile, cela peut être la meilleure solution.]
.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>
Si la flèche personnalisée est nécessaire sur Firefox - avant Version 35 - mais vous n'avez pas besoin de soutenir les anciennes versions d'Internet Explorer - puis continuez à lire ...
Solution # 3 - Utilisez la propriété pointer-events
( démo )
-
L'idée est de superposer ici un élément sur la chute native flèche vers le bas (pour créer notre commande un), puis désavouer les événements de pointeur dessus.
Avantage: Il fonctionne bien dans WebKit et Gecko. Il semble bien aussi (pas qui s'avance des éléments de option
).
Inconvénient: Internet Explorer (Internet Explorer 10 et vers le bas) ne supporte pas pointer-events
, ce qui signifie que vous ne pouvez pas cliquer sur la flèche personnalisée. En outre, une autre (évidente) inconvénient de cette méthode est que vous ne pouvez pas cibler votre nouvelle image flèche avec un effet de vol stationnaire ou le curseur à la main, parce que nous avons juste des événements de pointeur handicapés sur eux!
Cependant, avec cette méthode, vous pouvez utiliser Moderniser ou des commentaires conditionnels pour rendre Internet Explorer revenir à la norme construite en flèche.
NB: Etant donné que Internet Explorer 10 ne supporte pas plus conditional comments
: Si vous voulez utiliser cette approche, vous devriez probablement utiliser Modernizr . Cependant, il est encore possible d'exclure le pointer-events CSS à partir d'Internet Explorer 10 avec un hack CSS décrit .
.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]-->
Autres conseils
Il est possible, mais malheureusement la plupart du temps dans les navigateurs WebKit dans la mesure où nous, en tant que développeurs, ont besoin. Voici l'exemple de style CSS recueillies à partir des options Chrome panneau par l'inspecteur des outils de développement intégré, amélioré pour correspondre aux propriétés CSS actuellement pris en charge dans la plupart des navigateurs modernes:
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;
}
Lorsque vous exécutez ce code sur une page dans un navigateur basé sur WebKit, il devrait changer l'apparence de la boîte de sélection, retirer OS-flèche standard et ajouter une flèche PNG, mettre un peu d'espacement avant et après l'étiquette, presque tout vous voulez.
La partie la plus importante est la propriété appearance
, qui modifie la façon dont se comporte l'élément.
Il fonctionne parfaitement dans presque tous les navigateurs WebKit, y compris les mobiles, bien que Gecko ne supporte pas appearance
ainsi que WebKit, il semble.
L'élément de sélection et sa fonction déroulant sont difficiles à coiffer.
sélectionnez par Chris Heilmann confirme ce que Ryan Dohery a dit dans un commentaire à la première réponse:
«L'élément de sélection est une partie de la système d'exploitation, pas le navigateur Chrome. Par conséquent, il est très peu fiable pour le style, et il ne fait pas nécessairement de sens d'essayer de toute façon. "
La plus grande inconséquence que je l'ai remarqué quand styling sélectionnez dropdowns est Safari et Google Chrome rendu (Firefox est entièrement personnalisable par CSS). Après quelques recherches dans les profondeurs obscures de l'Internet, je suis tombé sur ce qui suit, ce qui résout presque complètement mes états d'âme avec WebKit:
fix Safari et Google Chrome :
select {
-webkit-appearance: none;
}
Cela ne, cependant, retirez la flèche du menu déroulant. Vous pouvez ajouter une flèche déroulante à l'aide d'un div
à proximité avec un arrière-plan, la marge négative ou position absolue sur le menu déroulant de sélection.
* Plus d'informations et d'autres variables sont disponibles dans propriété CSS: -webkit-apparence .
balises <select>
peuvent être coiffés par CSS comme tout autre élément HTML sur une page HTML rendu dans un navigateur. Ci-dessous un exemple (trop simple) qui positionnera un élément de sélection sur la page et de rendre le texte des options en bleu.
Exemple de fichier 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>
Exemple de fichier 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;
}
J'ai eu ce problème exact, sauf que je ne pouvais pas utiliser les images et n'a pas été limité par le soutien du navigateur. Cela devrait être «sur spec» et avec de la chance de commencer à travailler partout éventuellement .
Il utilise des couches de fond pivotée couches à «découper» une flèche vers le bas, comme pseudo-éléments ne fonctionneraient pas pour l'élément de sélection.
Edit:. Dans cette version mise à jour j'utilise des variables CSS et un système de thématisation minuscule
: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>
Voici une version qui fonctionne dans tous les navigateurs modernes. La clé utilise appearance:none
qui supprime la mise en forme par défaut. Étant donné que tous le formatage est parti, vous devez rajouter dans la flèche qui différencie visuellement la sélection de l'entrée.
Exemple de travail: 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>
Le blog Comment CSS forme déroulant le style pas JavaScript fonctionne pour moi, mais il échoue dans Opera si:
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>
Je suis arrivé à votre cas en utilisant Bootstrap . Ceci est la solution la plus simple qui fonctionne:
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>
Note:. Les choses base64 est fa-chevron-down
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;}
Dans les navigateurs modernes, il est relativement indolore pour le style de la <select>
en CSS. Avec appearance: none
la seule partie délicate remplace la flèche (si c'est ce que vous voulez). Voici une solution qui utilise un URI data:
en ligne avec texte brut 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>
Le reste du style (bordures, rembourrage, couleurs, etc.) est assez simple.
Cela fonctionne dans tous les navigateurs que je viens d'essayer (Firefox 50, Chrome 55, dépasse 38, et Safari 10). Une note sur Firefox est que si vous voulez utiliser le caractère #
dans l'URI de données (par exemple fill: #000
), vous devez échapper (fill: %23000
).
Utilisez la propriété clip
pour rogner les frontières et la flèche de l'élément select
, puis ajoutez vos propres styles de remplacement à l'emballage:
<!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>
utiliser un second sélectionner avec zéro opacité pour rendre le bouton cliquable:
<!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>
Coordonnées diffèrent entre Webkit et d'autres navigateurs, mais un @media requête peut couvrir que.
Références
Un très bel exemple qui utilise Oui. Vous pouvez le style tout élément HTML par son nom de la balise, comme ceci: Bien sûr, vous pouvez également utiliser une classe CSS pour le dénommer, comme tout autre élément: :after
et :before
faire l'affaire est dans
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>
Modifier cet élément n'est pas recommandé, mais si vous voulez essayer c'est comme tout autre élément HTML.
Exemple d'édition:
/* 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>
Vous devriez vraiment le faire comme dans Styling select, et optgroup options avec CSS . À bien des égards, couleur de fond et la couleur sont juste ce que vous généralement besoin d'options de style, pas toute la sélection.
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;
}
Il utilise une couleur d'arrière-plan pour sélectionner des éléments et je retire l'image ..
d'Internet Explorer 10, vous pouvez utiliser le ::-ms-expand
sélecteur d'élément pseudo style, et se cacher, le menu déroulant élément de flèche.
select::-ms-expand {
display:none;
/* or visibility: hidden; to keep it's space/hitbox */
}
Le style reste devrait être similaire à d'autres navigateurs.
Voici une fourchette de base de jsFiddle de DanielD qui applique le soutien IE10
Voici une solution basée sur mes idées préférées de cette discussion. Cela permet à coiffer un élément
Il fonctionne Internet Explorer 10 (et versions ultérieures) avec une solution de repli en toute sécurité pour Internet Explorer 8/9. Une mise en garde pour ces navigateurs est que l'image de fond doit être positionné et être assez petit pour se cacher derrière le natif étendre le contrôle.
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
Il existe un moyen de style balises SELECT.
S'il y a un paramètre « taille » dans la balise, presque tous les CSS appliquera. En utilisant cette astuce, j'ai créé un violon qui est pratiquement équivalent à une balise select normale, plus la valeur peut être modifiée manuellement comme une zone de liste déroulante dans les langues visuelles (sauf si vous mettez readonly dans la balise d'entrée).
Alors, voici un exemple minimal pour voir le principe:
(vous aurez besoin jQuery pour le mécanisme de 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>
Voici le violon avec quelques autres styles: https://jsfiddle.net/dkellner/7ac9us70/
(Il est overstyled bien sûr, juste pour démontrer les possibilités.)
Remarquez comment les balises n'encapsulent pas les options appartenant en eux comme ils le devraient normalement; oui cela est intentionnel, il est pour le style. (La façon bien maniéré serait beaucoup moins stylable.) Et oui, ils ne fonctionnent parfaitement bien ainsi.
Avant que quiconque ne signale la partie NO-JS: Je sais que la question dit "non Javascript". Pour moi, cela est plus comme s'il vous plaît ne vous embêtez pas avec les plugins, je sais qu'ils peuvent le faire, mais je dois la façon native . Entendue, aucun plug-ins, pas de scripts supplémentaires inclus, seulement ce qui correspond à l'intérieur « onclick » d'une balise. La seule dépendance est jQuery, pour éviter la folie « de document.parentNode.getElementsByTagName » native. Mais il peut fonctionner de cette façon. Alors oui, cela est une balise select native avec un style natif et certains gestionnaires onclick. Il est clairement pas "une solution Javascript".
Amusez-vous!
Vous pouvez également ajouter un style de vol stationnaire à la liste déroulante.
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>
Une seule solution CSS et HTML
Il semble compatible avec Chrome, Firefox et Internet Explorer 11. Mais s'il vous plaît laisser vos commentaires sur d'autres navigateurs Web.
Comme le suggère la réponse , je conclurai ma sélection dans un div (même deux divs pour la compatibilité x-navigateur) pour obtenir le comportement attendu.
Voir 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>
Remarquez les deux emballages div.
Notez également le div supplémentaire ajouté à placer le bouton flèche vers le bas où vous voulez (position absolue), ici nous avons mis sur la gauche.
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;
}
La troisième méthode dans DanielD de répondre peut être amélioré pour travailler avec des effets de vol stationnaire et d'autres événements de souris. Assurez-vous que le -Element « bouton » vient juste après l'élément de sélection dans le balisage. Ciblez ensuite à l'aide du sélecteur CSS +:
HTML:
<select class="select-input">...</select>
<div class="select-button"></div>
CSS:
.select-input:hover+.select-button {
<Hover styles here>
}
Ceci, cependant, montrent l'effet de vol stationnaire en vol stationnaire partout sur l'élément de sélection, non seulement sur le « bouton ».
J'utilise cette méthode en combinaison avec angulaire (puisque mon projet se trouve être une application angulaire de toute façon), pour couvrir l'ensemble select-élément, et laisser l'affichage angulaire du texte de l'option sélectionnée dans le « bouton » - élément. Dans ce cas, il est parfaitement logique que le vol stationnaire effet applique en vol stationnaire partout sur la sélection.
Il ne fonctionne pas sans JavaScript, donc si vous voulez faire cela, et votre site doit travailler sans JavaScript, vous devez vous assurer que votre script ajoute les éléments et les classes nécessaires à la mise en valeur. De cette façon, un navigateur sans JavaScript simplement obtenir une vie normale, sans style, sélectionnez, au lieu d'un badge de style qui ne met pas à jour correctement.
styles personnalisés Sélectionnez CSS
Testé Internet Explorer (10 et 11), Edge, Firefox et 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>