Eliminar Seleccionar flecha en IE

Tengo un elemento de selección, quiero eliminar la flecha, luego puedo agregar otro ícono ... puedo hacerlo para Firefox Safari y Chrome, pero esto no funcionó en IE9 .

.styled-select select 
{
    border: 0 !important;  /*Removes border*/
    -webkit-appearance: none;  /*Removes default chrome and safari style*/
    -moz-appearance: none;  /*Removes default style Firefox*/
    background: url('select_icon.png')  no-repeat;
     background-position: 179px 7px;
     text-indent: 0.01px;
     text-overflow: "";
     color: #FCAF17;
     width:200px;
 }

VER Fiddle en IE9 . todo lo que necesito es eliminar la flecha en ie9 Por favor, responda JSFIDDLE.

En IE9, es posible con un simple truco según lo aconsejado por @Spudley. Como ha personalizado la altura y el ancho de div y select, debe cambiar div:beforecss para que coincida con el suyo.

En caso de que sea IE10, es posible usar debajo de css3.

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

Sin embargo, si está interesado en el complemento jQuery, intente Chosen.jso puede crear el suyo propio en js.

Sugeriría una solución mía que puedes encontrar en este repositorio de GitHub . Esto también funciona para IE8 e IE9 con una flecha personalizada que proviene de una fuente de icono.

Ejemplos de menú desplegable de navegador cruzado personalizado en acción: compruébelos con todos sus navegadores para ver la función de navegador cruzado.

De todos modos, comencemos con los navegadores modernos y luego veremos la solución para los más antiguos.

Flecha desplegable para Chrome, Firefox, Opera, Internet Explorer 10+

Para estos navegadores, es fácil establecer la misma imagen de fondo para el menú desplegable para tener la misma flecha.

Para hacerlo, debe restablecer el estilo predeterminado del navegador para la selectetiqueta y establecer nuevas reglas de fondo (como se sugirió anteriormente).

select {
    /* you should keep these firsts rules in place to maintain cross-browser behaviour */
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    background-image: url('<custom_arrow_image_url_here>');
    background-position: 98% center;
    background-repeat: no-repeat;
    outline: none;
    ...
}

Las appearancereglas se establecen en none para restablecer las predeterminadas de los navegadores, si desea tener el mismo aspecto para cada flecha, debe mantenerlas en su lugar.

Las backgroundreglas en los ejemplos se establecen con imágenes SVG en línea que representan diferentes flechas. Están posicionados al 98% desde la izquierda para mantener un margen en el borde derecho (puede modificar fácilmente la posición que desee).

Para mantener el comportamiento correcto entre navegadores, la única otra regla que debe dejarse en su lugar es la outline . Esta regla restablece el borde predeterminado que aparece (en algunos navegadores) cuando se hace clic en el elemento. Todas las demás reglas pueden modificarse fácilmente si es necesario.

Flecha desplegable para Internet Explorer 8 (IE8) e Internet Explorer 9 (IE9) usando Icon Font

Esta es la parte más difícil ... O tal vez no.

No existe una regla estándar para ocultar las flechas predeterminadas para estos navegadores (como select::-ms-expandpara IE10 +). La solución es ocultar la parte del menú desplegable que contiene la flecha predeterminada e insertar una fuente de icono de flecha (o un SVG, si lo prefiere) similar al SVG que se usa en los otros navegadores (consulte la selectregla CSS para obtener más información). detalles sobre el SVG en línea utilizado).

El primer paso es establecer una clase que pueda reconocer el navegador: esta es la razón por la que he usado los IF condicionales de IE al comienzo del código. Estos IF se usan para adjuntar clases específicas a la htmletiqueta para reconocer el navegador IE más antiguo.

Después de eso, todo selecten el HTML debe estar envuelto por una div(o cualquier etiqueta que pueda envolver un elemento). En este contenedor simplemente agregue la clase que contiene la fuente del icono.

<div class="selectTagWrapper prefix-icon-arrow-down-fill">
    ...
</div>

En palabras sencillas, este contenedor se utiliza para simular la selectetiqueta.

Para actuar como un menú desplegable, el contenedor debe tener un borde, porque ocultamos el que proviene del select.

Tenga en cuenta que no podemos usar el selectborde porque tenemos que ocultar la flecha predeterminada alargándola un 25% más que el contenedor. En consecuencia, su borde derecho no debería ser visible porque ocultamos este 25% más por la overflow: hiddenregla aplicada a selectsí mismo.

La fuente de icono de flecha personalizada se coloca en la pseudo clase :beforedonde la regla contentcontiene la referencia para la flecha (en este caso, es un paréntesis derecho).

También colocamos esta flecha en una posición absoluta para centrarla tanto como sea posible (si usa diferentes fuentes de iconos, recuerde ajustarlas oportunamente cambiando los valores superior e izquierdo y el tamaño de fuente).

.ie8 .prefix-icon-arrow-down-fill:before,
.ie9 .prefix-icon-arrow-down-fill:before {
    content: ")";
    position: absolute;
    top: 43%;
    left: 93%;
    font-size: 6px;
    ...
}

Puede crear y sustituir fácilmente la flecha de fondo o la flecha de fuente de icono, con cada una de las que desee simplemente cambiándola en la background-imageregla o creando un nuevo archivo de fuente de icono usted mismo.

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