Come rimuovere l'icona della freccia predefinita da un elenco a discesa (selezionare l'elemento)?

Voglio rimuovere la freccia del menu a discesa da un <select>elemento HTML . Per esempio:

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

Come farlo in Opera, Firefox e Internet Explorer?

Non c'è bisogno di hack o overflow. C'è uno pseudo-elemento per la freccia a discesa su IE:

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

Le soluzioni precedentemente menzionate funzionano bene con Chrome ma non con Firefox.

Ho trovato una soluzione che funziona bene sia su Chrome che su Firefox (non su IE). Aggiungi i seguenti attributi al CSS per il tuo SELECTelement e regola il margine superiore in base alle tue esigenze.

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

Spero che questo ti aiuti :)

Modo semplice per rimuovere la freccia a discesa dalla selezione

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>

Prova questo :

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

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

Se usi Internet Explorer:

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

Oppure puoi usare Scelto: http://harvesthq.github.io/chosen/

Prova questo:

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

Prova questo funziona per me,

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

Non puoi nasconderlo ma usando l'overflow nascosto puoi effettivamente farlo scomparire.

Volevo solo completare il thread. Per essere chiari, questo non funziona in IE9, tuttavia possiamo farlo con un piccolo trucco 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;
}

Come ho risposto in Rimuovi selezionare la freccia su IE

Nel caso in cui si desideri utilizzare la classe e la pseudo-classe:

.simple-control è la tua classe css

:disabled è una 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;

}

Non è possibile farlo con un supporto cross browser completamente funzionale.

Prova a prendere un div di 50 pixel supponi e sposta l'icona a discesa desiderata a tua scelta

Ora all'interno di quel div, aggiungi forse il tag select con una larghezza di 55 pixel (qualcosa di più della larghezza del contenitore)

Penso che otterrai quello che vuoi.

Nel caso in cui non desideri alcuna icona a discesa a destra, esegui tutti i passaggi tranne che per spostare l'immagine a destra. Imposta contorno: 0 attivo per il tag di selezione. questo è tutto

c'è una libreria chiamata DropKick.js che sostituisce i normali menu a discesa con HTML / CSS in modo da poterli definire completamente e controllarli con javascript. http://dropkickjs.com/

Funziona con tutti i browser e tutte le versioni:

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>