html - siempre - ¿Cómo eliminar el icono de flecha predeterminado de una lista desplegable(elemento de selección)?

maquetar select css

Question

Quiero eliminar la flecha desplegable de un elemento HTML <select> . 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?

Answer 1

Como respondí en Eliminar, seleccione la flecha en IE

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

.simple-control es tu clase 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;
}

Answer 2

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>

Answer 3

Intenta esto funciona para mí,

<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 se puede ocultar, pero si usa el desbordamiento oculto, puede hacerlo desaparecer.

Answer 4

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

Encontré una Solution que funciona bien tanto en Chrome como en Firefox (no en IE). Agregue los siguientes atributos al CSS para su SELECTelement 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 :)

Answer 5

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

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

Answer 6

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

Intente tomar un div de 50 píxeles, suponga y haga flotar el icono desplegable que desee a su derecha.

Ahora, dentro de ese div, agregue la etiqueta de selección 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 para hacer flotar la imagen a la derecha. Establecer contorno: 0 en el foco para la etiqueta seleccionada. Eso es

Answer 7

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

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

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

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

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

Answer 12

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;

}