Pregunta Seleccione eliminar flecha desplegable


Quiero eliminar la flecha desplegable de seleccionar en 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?

También hay una imagen: enter image description here


189
2018-05-17 07:44


origen


Respuestas:


no hay necesidad de hacks o desbordamiento ... hay un pseudo-elemento para la flecha desplegable en IE ...

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

289
2017-09-18 17:24



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

Encontre un Solución eso 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 que se ajuste a sus necesidades.

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

Espero que esto ayude :)


205
2017-12-09 06:55



Manera simple de eliminar la flecha desplegable desde 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>


102
2017-09-17 06:13



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 Choosen: http://harvesthq.github.io/chosen/


41
2018-05-17 07:47



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

13
2017-10-07 11:49



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 si usas el desbordamiento oculto, puedes hacerlo desaparecer.


13
2017-08-06 18:27



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

5
2018-03-28 20:23



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;

}


2
2018-04-02 06:28



Como respondí en Eliminar la flecha Seleccionar en IE

En caso de que quiera usar la clase y la pseudo-clase:

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

2
2018-04-06 14:59