Voici trois solutions:
Solution n ° 1 - apparence: aucune - avec solution de contournement d'Internet Explorer 10-11 ( démo )
-
Pour masquer la flèche par défaut définie appearance: nonesur l'élément de sélection, puis ajoutez votre propre flèche personnalisée avecbackground-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: nonea une très bonne prise en charge du navigateur ( caniuse ) - sauf pour Internet Explorer 11 (et versions ultérieures) et Firefox 34 (et versions ultérieures).
Nous pouvons améliorer cette technique et ajouter la prise en charge d'Internet Explorer 10 et d'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 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 génial d'Internet Explorer 9.
Pour au moins annuler notre flèche personnalisée - en laissant intacte la flèche de sélection par défaut.
/* 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 simple et prend en charge un bon navigateur - elle devrait généralement suffire.
Si la prise en charge du navigateur pour Internet Explorer 9 (et versions ultérieures) et Firefox 34 (et versions ultérieures) est nécessaire, continuez à lire ...
Solution # 2 Tronquez l'élément de sélection pour masquer la flèche par défaut ( démo )
-
(En savoir plus ici)
Enveloppez l' selectélément dans un div avec une largeur fixe etoverflow:hidden .
Donnez ensuite à l' selectélément une largeur d'environ 20 pixels supérieure à la div .
Le résultat est que la flèche déroulante par défaut de l' selectélément sera masquée (en raison de laoverflow:hidden sur le conteneur), et vous pouvez placer n'importe quelle image d'arrière-plan que vous voulez sur le côté droit de la div.
L' avantage de cette approche est qu'elle est multi-navigateur (Internet Explorer 8 et versions ultérieures, WebKit et Gecko ). Cependant, l' inconvénient de cette approche est que la liste déroulante des options dépasse du côté droit (par les 20 pixels que nous avons cachés ... car les éléments d'option prennent la largeur de l'élément de sélection).
[Il convient toutefois de noter que si l'élément de sélection personnalisé n'est nécessaire que pour les appareils mobiles - 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 les mobiles, 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 la version 35 - mais que vous n'avez pas besoin de prendre en charge les anciennes versions d'Internet Explorer - continuez à lire ...
Solution # 3 - Utilisez la pointer-eventspropriété ( démo )
-
(En savoir plus ici)
L'idée ici est de superposer un élément sur la flèche déroulante native (pour créer notre élément personnalisé), puis d'interdire les événements de pointeur dessus.
Avantage: il fonctionne bien dans WebKit et Gecko. Il a l'air bien aussi (pas d' optionéléments saillants ).
Inconvénient: Internet Explorer (Internet Explorer 10 et versions ultérieures) ne prend pas en chargepointer-events , ce qui signifie que vous ne pouvez pas cliquer sur la flèche personnalisée. En outre, un autre inconvénient (évident) de cette méthode est que vous ne pouvez pas cibler votre nouvelle image de flèche avec un effet de survol ou un curseur manuel, car nous venons de désactiver les événements de pointeur sur eux!
Cependant, avec cette méthode, vous pouvez utiliser Modernizer ou des commentaires conditionnels pour que Internet Explorer revienne à la flèche intégrée standard.
NB: Étant donné qu'Internet Explorer 10 ne prend conditional commentsplus en charge : Si vous souhaitez utiliser cette approche, vous devriez probablement utiliser Modernizr . Cependant, il est toujours possible d'exclure le CSS des événements de pointeur 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\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]-->