Comment supprimer l'icône de flèche par défaut d'une liste déroulante (élément de sélection)?


297

Je souhaite supprimer la flèche déroulante d'un <select>élément HTML . Par exemple:

<select style="width:30px;-webkit-appearance: none;">
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    ...
</select>

Comment le faire dans Opera, Firefox et Internet Explorer?

entrez la description de l'image ici


Quelques réponses / hacks pour le cacher dans Firefox - stackoverflow.com/questions/5912791/…
andyb

2
apparence #slectType { -webkit-appearance: none; appearance: none /*menulist*/ !; max-width: 300px; line-height: 0px;} input[type='text'], select {max-height: 30px;max-width: 300px; text-align-last: center; /*text-indent: 5px;*/} button:hover {color: #FFF;background-color: #566977;box-shadow:none;border-color: #759AB5;} #errorMSG{z-index: 2147483647;} Navigations importantes [CH: -webkit, FF: -moz, IE: -ms, Oprea: -o];
Yash


Réponses:


383

Il n'y a pas besoin de hacks ou de débordement. Il y a un pseudo-élément pour la flèche déroulante sur IE:

select::-ms-expand {
    display: none;
}

22
car la question était de savoir comment supprimer la flèche déroulante dans IE. IE9 n'a pas cette fonctionnalité, mais cela fonctionne dans IE10. donc à moins que vous n'utilisiez Windows XP, vous devriez quand même utiliser IE10. IE11 est presque sorti. une autre option est un vilain hack CSS pour masquer le bouton déroulant réel et créer le vôtre.
nrutas

2
lien ici est le hack laid pour cacher le débordement
nrutas

1
Fonctionne dans IE11. Gracias!
ConorLuddy

Cela ne fonctionnait pas dans Firefox. Utilisez la solution de Varun Rathore ci-dessous pour Firefox.
AlmostPitt

1
c'est uniquement pour IE. bien sûr, cela ne fonctionnera pas dans Firefox.
nrutas

289

Les solutions mentionnées précédemment fonctionnent bien avec Chrome mais pas avec Firefox.

J'ai trouvé une solution qui fonctionne bien à la fois dans Chrome et Firefox (pas sur IE). Ajoutez les attributs suivants au CSS pour votre SELECTelement et ajustez la marge supérieure en fonction de vos besoins.

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

J'espère que cela t'aides :)


9
Cette astuce a cessé de fonctionner sur Firefox à partir de la version 31 (dans la version Nightly à partir de mai 2014). Voyons ce qui peut être fait en attendant. Ce résumé que j'ai écrit a la liste complète: gist.github.com/joaocunha/6273016
João Cunha

La méthode de Joäo Cunha a été vérifiée et utilisée avec succès. Lorsque vous le vérifiez, n'oubliez pas d'ouvrir le lien dans Firefox!
NoobishPro

Ça a marché pour moi. Je voulais l'utiliser pour wkhtmltopdf pour générer du pdf à partir de html. Merci
Faisal

187

Un moyen simple de supprimer la flèche déroulante de certains

select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

/* For IE10 */
select::-ms-expand {
  display: none;
}
<select>
  <option>2000</option>
  <option>2001</option>
  <option>2002</option>
</select>


4
Je viens d'utiliser appearance: noneChrome et Firefox Quantum (v59 et plus). -À- dire pas besoin préfixes fournisseur plus .
CPHPython

2
@CPHPython La plupart des navigateurs à partir de ce commentaire ont toujours une balise "prise en charge partielle avec préfixe" ...
Dan

2
@CPHPython vous devez avoir Autoprefixer installé sur votre projet pour que le non préfixé appearance: nonefonctionne. La plupart des navigateurs ont encore besoin des préfixes.
Daniel Tonon

@DanielTonon oh, peut-être que j'utilisais un paquet postcss comme ça. Je ne me souviens pas exactement, mais je pense avoir vérifié l'inspecteur du navigateur avant de commenter.
CPHPython

58

Essaye ça :

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 2px 30px 2px 2px;
    border: none;
}

JS Bin: http://jsbin.com/aniyu4/2/edit

Si vous utilisez Internet Explorer:

select {
    overflow:hidden;
    width: 120%;
}

Ou vous pouvez utiliser Choosen: http://harvesthq.github.io/chosen/


1
Avez-vous testé votre JSBin dans IE et Firefox? Je vois toujours la flèche déroulante intégrée dans les deux.
Martin Smith

Vérifiez avec Choosen, je pense que c'est le meilleur choix.
EpokK

"Si vous utilisez Internet Explorer"? Vous devez prendre en compte le grand% de la population qui utilise IE et les prend en charge indépendamment
Danny Mahoney

Les statistiques d'utilisation de nos sites sont les suivantes: 5,21% IE ou 2,37% Edge
nu everest

"Si vous utilisez IE" serait correct, il serait mieux adapté de dire "Si vous avez besoin de prendre en charge IE" mais de nos jours, votre technologie devrait être correctement ciblée vers votre public, si vous utilisez un site Web site Web destiné aux développeurs, je doute que vous ayez besoin de prendre en charge TOUTES les versions d'IE.
Brandito

17

Essaye ça:

HTML:

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

CSS:

.customselect {
    width: 70px;
    overflow: hidden;
}

.customselect select {
   width: 100px;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}

15

Essayez ça ça marche pour moi,

<style>
    select{
        border: 0 !important;  /*Removes border*/
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        text-overflow:'';
        text-indent: 0.01px; /* Removes default arrow from firefox*/
        text-overflow: "";  /*Removes default arrow from firefox*/
    }
    select::-ms-expand {
        display: none;
    }
    .select-wrapper
    {
        padding-left:0px;
        overflow:hidden;
    }
</style>
    
<div class="select-wrapper">
     <select> ... </select>
</div>

Vous ne pouvez pas vous cacher mais en utilisant le débordement caché, vous pouvez le faire disparaître.


6

Je voulais juste terminer le fil. Pour être très clair, cela ne fonctionne pas dans IE9, mais nous pouvons le faire par petite astuce css.

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

.customselect {
    width: 80px;
    overflow: hidden;
   border:1px solid;
}

.customselect select {
   width: 100px;
   border:none;
  -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}

5

Comme je l'ai répondu dans Supprimer Sélectionnez la flèche sur IE

Si vous souhaitez utiliser la classe et la pseudo-classe:

.simple-control est votre classe css

:disabled est une pseudo classe

select.simple-control:disabled{
         /*For FireFox*/
        -webkit-appearance: none;
        /*For Chrome*/
        -moz-appearance: none;
}

/*For IE10+*/
select:disabled.simple-control::-ms-expand {
        display: none;
}

4
select{
padding: 11px 50px 11px 10px;
background: rgba(255,255,255,1);
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #8ba2d4;

}


2

Vous ne pouvez pas le faire avec un support multi-navigateur entièrement fonctionnel.

Essayez de prendre une division de 50 pixels et faites flotter l'icône de liste déroulante de votre choix à droite de cette

Maintenant, dans cette div, ajoutez la balise de sélection avec une largeur de 55 pixels peut-être (quelque chose de plus que la largeur du conteneur)

Je pense que vous obtiendrez ce que vous voulez.

Dans le cas où vous ne voulez pas d'icône de dépôt à droite, effectuez toutes les étapes sauf pour faire flotter l'image à droite. Définir le contour: 0 sur le focus pour la balise de sélection. c'est tout


1
Je ne peux pas obtenir d'aide de ces conseils. Quelqu'un peut-il donner un code adéquat ici? Je vous remercie.
user2301515

2

il y a une bibliothèque appelée DropKick.js qui remplace les listes déroulantes de sélection normales par HTML / CSS afin que vous puissiez entièrement les styliser et les contrôler avec javascript. http://dropkickjs.com/


2

Fonctionne pour tous les navigateurs et toutes les versions:

JS

jQuery(document).ready(function () {    
    var widthOfSelect = $("#first").width();
    widthOfSelect = widthOfSelect - 13;
    //alert(widthOfSelect);
    jQuery('#first').wrap("<div id='sss' style='width: "+widthOfSelect+"px; overflow: hidden; border-right: #000 1px solid;' width=20></div>");
});

HTML

<select class="first" id="first">
  <option>option1</option>
  <option>option2</option>
  <option>option3</option>
</select>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.