web-dev-qa-db-fra.com

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

Je souhaite supprimer la flèche de la liste déroulante d'un élément HTML <select>. 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?

enter image description here

htmlcssdrop-down-menuhtml-select
249
user2301515

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

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

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

J'ai trouvé un Solution qui fonctionne bien à la fois dans Chrome et Firefox (pas sous IE). Ajoutez les attributs suivants au CSS pour votre SELECTelement et ajustez le haut de la marge en fonction de vos besoins.

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

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

244
Varun Rathore

n moyen simple pour supprimer la flèche de la liste déroulante

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>
146
Sangeet Shah

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 Choisi: http://harvesthq.github.io/chosen/

53
EpokK

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;
}
17
Luke Kalyan Brata Sarker

Essayez ç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 cacher, mais en utilisant un débordement masqué, vous pouvez réellement le faire disparaître.

15
Mahesh Shitole

Je voulais juste compléter le fil. Pour être très clair, cela ne fonctionne pas dans IE9, cependant nous pouvons le faire par petit truc en 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;
}
6
sun2

Comme j'ai répondu dans Supprimer 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;
}
5
Tejasvi Hegde
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;

}

3
Mitul

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>
2
SK.

Vous ne pouvez pas faire cela avec un support multi-navigateur pleinement fonctionnel.

Essayez de prendre une largeur de 50 pixels, supposez et faites flotter l’icône de la liste déroulante de votre choix à droite de celle-ci.

Dans cette division, ajoutez la balise select d’une largeur de 55 pixels (peut-être plus que la largeur du conteneur).

Je pense que vous obtiendrez ce que vous voulez.

Si vous ne souhaitez pas d’icône de dépôt à droite, il vous suffit de suivre toutes les étapes, à l’exception de la possibilité de faire flotter l’image à droite. Définir le contour: 0 sur le focus pour la balise de sélection. c'est ça

2
Kaustav Banerjee

il existe 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 styler et les contrôler avec javascript. http://dropkickjs.com/

2
nrutas