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

Resuelto user2301515 asked hace 11 años • 15 respuestas

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?

ingrese la descripción de la imagen aquí

May 17 '13 14:05 user2301515

Aceptado

No hay necesidad de hacks ni desbordamiento. Hay un pseudoelemento para la flecha desplegable en IE:

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

Sep 18 '2013 17:09 nrutas

Las soluciones mencionadas anteriormente funcionan bien con Chrome pero no con 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 SELECelement y ajuste el margen superior para satisfacer sus necesidades.

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

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

</select>

Expandir fragmento

Dec 09 '2013 06:12 Varun Rathore