Comment styliser un dropdown avec seulement CSS?
est-ce qu'il y a une façon pour les CSS de faire un <select> dropdown?
j'ai besoin de styliser un formulaire <select> autant que humainement possible, sans aucun JavaScript. Quelles sont les propriétés que je peux utiliser pour le faire dans CSS?
ce code doit être compatible avec tous les principaux navigateurs:
- Internet Explorer 6,7 and 8
- Firefox
- Safari
je sais que je peux le faire avec JavaScript: exemple .
et je ne parle pas de style simple. Je veux savoir ce qu'on peut faire de mieux avec CSS.
j'ai trouvé des questions similaires à sur un Débordement de Pile.
et celui-ci sur Doctype.com.
24 réponses
voici 3 solutions:
Solution #1-Apparence: aucun - avec IE10-11 solution de contournement ( Démo )
pour cacher la flèche par défaut définie appearance: none sur l'élément select, puis ajouter 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 */
}
Prise En Charge Du Navigateur:
appearance: none a un très bon support de navigateur ( caniuse ) - sauf ie11 - et firefox 34-
nous pouvons améliorer cette technique et ajouter le support pour ie10 et ie11 en ajoutant
select::-ms-expand {
display: none; /* hide the default arrow in ie10 and ie11 */
}
si ie9 est un problème - nous n'avons aucun moyen de supprimer la flèche par défaut (ce qui signifierait que nous aurions maintenant deux flèches), mais, nous pourrions utiliser un sélecteur IE9 funky pour au moins annuler notre flèche personnalisée-laissant la flèche par défaut sélectionner intact.
/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0"151920920") {
select {
background-image:none;
padding: 5px;
}
}
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: IE hackery ahead */
select::-ms-expand {
display: none; /* remove default arrow in IE 10 and 11 */
}
/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0"151930920") {
select {
background:none;
padding: 5px;
}
}<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>cette solution est facile et a une bonne prise en charge du navigateur - elle devrait généralement suffire.
si le support du navigateur pour ie9 - et firefox 34 - est nécessaire, alors continuez à lire...
Solution #2 tronquer l'élément select pour cacher la flèche par défaut ( Demo )
envelopper l'élément select dans un div avec une Largeur fixe et overflow:hidden .
donne alors à l'élément select une largeur d'environ 20 pixels de plus que le div .
le résultat est que la flèche descendante par défaut de l'élément select sera cachée (en raison du overflow:hidden sur le conteneur), et vous pouvez placer n'importe quel arrière-plan l'image que vous voulez sur le côté droit de la div.
le avantage de cette approche est qu'il est cross-browser (Internet Explorer 8 et plus tard, WebKit , et Gecko ). Cependant, le désavantage de cette approche est que les options drop-down juts sur le côté droit (par les 20 pixels que nous avons cachés... parce que l'option éléments prennent la largeur de la sélectionner élément.)
[il faut noter, cependant, que si l'élément de sélection personnalisé est nécessaire seulement pour MOBILE appareils - alors le problème ci - dessus ne s'applique pas-en raison de la façon dont chaque téléphone ouvre nativement l'élément de sélection. 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 prendre en charge les anciennes versions D'IE-alors continuez à lire...
Solution #3-utiliser la propriété pointer-events ( Demo )
l'idée ici est de superposer un élément au-dessus de la flèche descendante native (pour créer notre personnalisé) et ensuite rejeter les événements de pointeur sur elle.
avantage: fonctionne bien dans WebKit et Gecko. Il semble bon aussi (pas de jutting out option éléments)
désavantage: Internet Explorer (IE10 et inférieur) ne supporte pas pointer-events , ce qui signifie que vous ne pouvez pas cliquer La Flèche personnalisée. Aussi, un autre inconvénient (évident) avec cette méthode est que vous ne pouvez pas cibler votre nouvelle image de flèche avec un effet de vol stationnaire ou main curseur, parce que nous venons de désactiver les événements pointer sur eux!
cependant, avec cette méthode, vous pouvez utiliser Modernizer ou des commentaires conditionnels pour faire Internet Explorer revenir à la norme construit dans la flèche.
NB: étant Qu'Internet Explorer 10 ne supporte plus conditional comments : si vous voulez utiliser cette approche, vous devriez probablement utiliser Modernizr . Cependant, il est toujours possible de exclure le pointeur-événements CSS D'Internet Explorer 10 avec un hack CSS décrit ici .
.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"151970920") {
.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]-->il est possible, mais malheureusement la plupart du temps dans les navigateurs Webkit-basés dans la mesure où nous, en tant que développeurs, avons besoin. Voici l'exemple du style CSS obtenu à partir du Panneau D'options Chrome via developer tools inspector 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 Fx (3.6 to 15) */
background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of IE 10*/
background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */
background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
border-radius: 2px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
color: #555;
font-size: inherit;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
}
lorsque vous exécutez ce code sur n'importe quelle page d'un navigateur Webkit-basé, il devrait changer l'apparence de la boîte de sélection, Supprimer standard OS-arrow et ajoutez une flèche PNG, mettez un peu d'espacement avant et après l'étiquette, presque tout ce que vous voulez.
la partie la plus importante est la propriété appearance , qui change le comportement de l'élément.
cela fonctionne parfaitement dans presque tous les navigateurs Webkit, y compris les navigateurs mobiles, bien que Gecko ne supporte pas appearance aussi bien que Webkit, semble-t-il.
l'élément select et sa caractéristique déroulante sont difficiles à styliser.
attributs de style pour l'élément sélectionné par Chris Heilmann confirme ce que Ryan Dohery a dit dans un commentaire à la première réponse:
" l'élément select fait partie du système d'exploitation, le navigateur chrome. Par conséquent, il est très peu fiable au style, et il ne nécessairement logique d'essayer de toute façon."
la plus grande incohérence que j'ai remarqué lors de la sélection de style dropdowns est Safari et Google Chrome Rendu (Firefox est entièrement personnalisable par CSS). Après quelques recherches dans des profondeurs obscures de L'Internet, je suis tombé sur ce qui suit, qui résout presque complètement mes problèmes avec WebKit:
Safari et Google Chrome fix :
select {
-webkit-appearance: none;
}
toutefois, ceci supprime la flèche de descente. Vous pouvez ajouter une flèche de descente en utilisant un div à proximité avec un arrière-plan, une marge négative ou absolument positionné au-dessus du dropdown select.
* plus d'informations et d'autres variables sont disponibles dans CSS property: -webkit-apparence .
<select> peuvent être stylisées par CSS comme n'importe quel autre élément HTML sur une page HTML rendue dans un navigateur. Vous trouverez ci-dessous un exemple (trop simple) qui positionnera un élément select sur la page et affichera 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 d'images et que je n'étais pas limité par le support du navigateur. Cela devrait être "on spec" et avec de la chance commencer à travailler partout éventuellement .
il utilise des couches d'arrière-plan stratifiées rotatives pour" découper " une flèche descendante, car les pseudo-éléments ne fonctionneraient pas pour l'élément select. Remplacer "hotpink" par votre couleur préférée-j'utilise une variable.
select {
font: 400 12px/1.3 "Helvetica Neue", sans-serif;
-webkit-appearance: none;
appearance: none;
border: 1px solid hotpink;
line-height: 1;
outline: 0;
color: hotpink;
border-color: hotpink;
padding: 0.65em 2.5em 0.55em 0.75em;
border-radius: 3px;
background: linear-gradient(hotpink, hotpink) no-repeat,
linear-gradient(-135deg, rgba(255,255,255,0) 50%, white 50%) no-repeat,
linear-gradient(-225deg, rgba(255,255,255,0) 50%, white 50%) no-repeat,
linear-gradient(hotpink, hotpink) no-repeat;
background-color: white;
background-size: 1px 100%, 20px 20px, 20px 20px, 20px 60%;
background-position: right 20px center, right bottom, right bottom, right bottom;
}<select>
<option>So many options</option>
<option>...</option>
</select>Le blog Comment CSS forme de liste déroulante style JavaScript fonctionne pour moi, mais il ne parvient pas à Opéra :
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>
Voici une version qui fonctionne dans tous les navigateurs modernes. La clé utilise appearance:none qui supprime le formatage par défaut. Puisque tout le formatage est parti, vous devez ajouter en arrière dans la flèche qui différencie visuellement le select de l'entrée.
exemple pratique: 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>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;}
si le style est une question importante en utilisant un widget complètement personnalisé pourrait aider, comme celui décrit dans l'article de blog réinventer une baisse avec CSS et jQuery .
dans les navigateurs modernes, il est relativement indolore de style le <select> dans CSS. Avec appearance: none la seule partie délicate est de remplacer la flèche (si c'est ce que vous voulez). Voici une solution qui utilise une ligne data: URI avec SVG en clair:
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 je juste essayé (Firefox 50, Chrome 55, Edge 38, et Safari 10). Une remarque à propos de Firefox est que si vous voulez utiliser le caractère # dans L'URI de données (par exemple fill: #000 ), vous devez l'échapper ( fill: %23000 ).
je suis arrivé à votre affaire en utilisant Bootstrap . C'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: la substance base64 est fa-chevron-down en SVG.
utilisez la propriété clip pour recadrer les bordures 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>utilisez un second select avec l'opacité zéro 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>diffèrent entre Webkit et les autres navigateurs, mais une @media query peut couvrir cela.
Références
éditer cet élément n'est pas recommandé, mais si vous voulez essayer C'est comme n'importe quel autre élément HTML.
modifier l'exemple:
/*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>
un très bel exemple qui utilise :after et :before pour faire le tour est dans Styling Select Box avec CSS3 | CSSDeck
Oui. Vous pouvez styliser n'importe quel élément HTML par son nom d'étiquette, comme ceci:
select {
font-weight: bold;
}
bien sûr, vous pouvez également utiliser une classe CSS pour le style, comme tout autre élément:
<select class="important">
<option>Important Option</option>
<option>Another Important Option</option>
</select>
<style type="text/css">
.important {
font-weight: bold;
}
</style>
vous devriez certainement le faire comme dans style select, optgroup et options avec CSS . De bien des façons, la couleur de fond et la couleur sont juste ce que vous auriez typiquement besoin d'options de style, pas le select entier.
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;
}
cela utilise une couleur de fond pour les éléments sélectionnés et j'ai enlevé l'image..
à partir D'Internet Explorer 10, vous pouvez utiliser le ::-ms-expand pseudo sélecteur d'éléments de style, et masquer, l'élément Flèche vers le bas.
select::-ms-expand {
display:none;
/* or visibility: hidden; to keep it's space/hitbox */
}
le style restant doit être similaire à celui des autres navigateurs.
Voici une fourchette de base du jsfiddle de Danield qui applique le support pour IE10
Voici une solution basée sur mes idées préférées de cette discussion. Cela permet de coiffer un élément directement sans aucune marge supplémentaire.
fonctionne IE10+ avec un repli sûr pour IE8/9. Une mise en garde pour ces navigateurs est que l'image de fond doit être positionnée et suffisamment petite pour se cacher derrière le contrôle d'expansion natif.
HTML
<select name='options'>
<option value='option-1'>Option 1</option>
<option value='option-2'>Option 2</option>
<option value='option-3'>Option 3</option>
</select>
SCSS
body {
padding: 4em 40%;
text-align: center;
}
select {
$bg-color: lightcyan;
$text-color: black;
appearance: none; // using -prefix-free http://leaverou.github.io/prefixfree/
background: {
color: $bg-color;
image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1255/caret--down-15.png");
position: right;
repeat: no-repeat;
}
border: {
color: mix($bg-color, black, 80%);
radius: .2em;
style: solid;
width: 1px;
right-color: mix($bg-color, black, 60%);
bottom-color: mix($bg-color, black, 60%);
}
color: $text-color;
padding: .33em .5em;
width: 100%;
}
// Removes default arrow for IE10+
// IE 8/9 get dafault arrow which covers caret image
// as long as caret image is small than and positioned
// behind default arrow
select::-ms-expand {
display: none;
}
Codepen
il y a une façon de choisir le style des étiquettes.
S'il y a un paramètre" size " dans la balise, presque n'importe quel CSS s'appliquera. En utilisant cette astuce, j'ai créé un violon qui est pratiquement équivalent à une balise de sélection normale, plus la valeur peut être éditée manuellement comme une ComboBox dans les langues visuelles (à moins que vous mettiez readonly dans la balise d'entrée).
donc voici un exemple minimal pour voir le principe derrière:
(vous aurez besoin de 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 d'autres styles: https://jsfiddle.net/dkellner/7ac9us70 /
(c'est exagéré bien sûr, juste pour montrer les possibilités.)
remarquez comment les tags n'encapsulent pas les options qui leur appartiennent comme elles devraient normalement; Oui c'est intentionnel, c'est pour le style. (Les bonnes manières serait beaucoup moins à styliser.) Et oui, ils fonctionnent parfaitement de cette façon.
avant que quelqu'un ne remarque la partie NO-JS: je sais que la question dit "pas de Javascript". Pour moi, c'est plus comme s'il vous plaît ne vous embêtez pas avec les plugins, je sais qu'ils peuvent le faire, mais j'ai besoin de la manière native . Compris, pas de plugins, pas de scripts supplémentaires inclus, seulement ce qui correspond à "onclick"d'une étiquette. La seule la dépendance est jQuery, pour éviter le document natif".parentNode.getelemensbytagname " madness. Mais il peut travailler de cette façon. Donc oui, c'est un natif de balise select avec natif de style et de certains onclick gestionnaires. Ce n'est clairement pas "une solution Javascript".
Profitez-en!
la seconde méthode dans la réponse de Danield ( https://stackoverflow.com/a/13968900/280972 ) peut être améliorée pour travailler avec des effets de hover et d'autres événements de souris. Assurez-vous simplement que l'élément "bouton"vient juste après l'élément select dans le markup. Puis la cibler en utilisant le sélecteur + css:
HTML:
<select class="select-input">...</select>
<div class="select-button"></div>
CSS:
.select-input:hover+.select-button {
[hover styles here]
}
cela montrera toutefois l'effet de vol stationnaire lorsque planant n'importe où au-dessus de l'élément de sélection, pas juste au-dessus du "bouton".
j'utilise cette méthode en combinaison avec Angular (puisqu'il se trouve que mon projet est de toute façon une application Angular), pour couvrir l'ensemble de l'élément select, et laisser Angular afficher le texte de l'option sélectionnée dans l'élément"button". Dans ce cas, il est parfaitement logique que l'effet de vol stationnaire s'applique lorsque le vol stationnaire survole la select. Il ne fonctionne pas sans javascript, donc si vous voulez faire cela, et votre site doit fonctionner sans javascript, vous devez vous assurer que votre script ajoute les éléments et les classes nécessaires à l'amélioration. De cette façon, un navigateur sans javascript obtiendra tout simplement un normal, unstaken, select, au lieu d'un badge stylé qui ne se met pas à jour correctement.
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>UN CSS & HTML seule solution
je semble compatible avec Chrome, Firefox & IE11. Mais s'il vous plaît laissez vos commentaires concernant les autres navigateurs web.
comme suggéré par @Danield réponse, j'enroule mon select dans un div (même deux divs pour la compatibilité X-browser) 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 emballages div 2. Remarquez également le div supplémentaire ajouté pour placer le bouton Flèche-vers le bas où vous voulez (positionné absolument), ici, nous le mettons 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 hidding the default-provided browser arrow */
padding-left: 13px;
margin-left: 0;
border: none;
background: none;
/* margin-top & margin-bottom must be set since some browser have default values for select elements */
margin-bottom: 1px;
margin-top: 1px;
}
select:focus {
outline: none; /* removing default browsers outline on focus */
}
.search-select-arrow-down {
position: absolute;
height:10px;
width: 12px;
background: url(http://i.imgur.com/pHIYN06.png) scroll no-repeat 2px 0px;
left: 1px;
top: 5px;
}