¿Cómo eliminar el ícono de flecha predeterminado de una lista desplegable (seleccionar elemento)?

Quiero eliminar la flecha desplegable de un <select>elemento HTML . Por ejemplo:

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

¿Cómo hacerlo en Opera, Firefox e Internet Explorer?

No hay necesidad de hacks o desbordamientos. Hay un pseudo-elemento para la flecha desplegable en IE:

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

Las soluciones mencionadas anteriormente funcionan bien con Chrome pero no en Firefox.

Encontré una solución que funciona bien tanto en Chrome como en Firefox (no en IE). Agregue los siguientes atributos al CSS para su elemento SELECT y ajuste el margen superior para satisfacer sus necesidades.

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

Espero que esto ayude :)

Forma sencilla de eliminar la flecha desplegable de seleccionar

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>

Prueba esto :

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 usa Internet Explorer:

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

O puede usar Elegido: http://harvesthq.github.io/chosen/

Prueba esto:

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

Prueba esto, me funciona,

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

No puedes esconderte, pero usando el desbordamiento oculto puedes hacer que desaparezca.

Solo quería completar el hilo. Para que quede muy claro, esto no funciona en IE9, sin embargo, podemos hacerlo con un pequeño truco 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;
}

Como respondí en Eliminar Seleccionar flecha en IE

En caso de que quiera usar la clase y la pseudoclase:

.simple-control es tu clase de CSS

:disabled es pseudo clase

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;

}

No puede hacer esto con un soporte de navegador cruzado completamente funcional.

Intente tomar una división de 50 píxeles y suponga que flota el icono desplegable que desee a la derecha de este

Ahora dentro de ese div, agregue la etiqueta select con un ancho de 55 píxeles tal vez (algo más que el ancho del contenedor)

Creo que obtendrás lo que quieres.

En caso de que no desee ningún icono de soltar a la derecha, solo siga todos los pasos, excepto la imagen flotante a la derecha. Establecer esquema: 0 en foco para la etiqueta de selección. Eso es

hay una biblioteca llamada DropKick.js que reemplaza los menús desplegables de selección normales con HTML / CSS para que pueda diseñarlos y controlarlos completamente con javascript. http://dropkickjs.com/

Funciona para todos los navegadores y todas las versiones:

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>