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

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?

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;
}

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 :)

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>

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/

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;
}

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.

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;
}

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;
}

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;

}

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

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/

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>