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

Question

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

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

Comment faire avec Opera, Firefox et Internet Explorer ?

Answer 1

Il n'est pas nécessaire de faire des piratages ou des débordements. Il y a un pseudo-élément pour la flèche déroulante sur IE :

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

Answer 2

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

J'ai trouvé un Solution qui fonctionne bien dans Chrome et Firefox (pas dans IE). Ajoutez les attributs suivants au CSS de votre élément SELECT et ajustez la marge supérieure en fonction de vos besoins.

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

<select>
  <option>one</option>
  <option>two</option>
  <option>three</option>

</select>

Answer 3

Essayez ceci :

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

Vous pouvez également utiliser Choosen : http://harvesthq.github.io/chosen/

Answer 4

Essayez ceci :

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

Answer 5

Essayez ceci, ç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 le cacher, mais en utilisant l'option overflow hidden, vous pouvez le faire disparaître.