Eliminar Seleccionar flecha en IE


126

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.


1
Puede que no sea posible en absoluto. Los navegadores (especialmente IE) han sido tradicionalmente reacios a ofrecer opciones extendidas de diseño de sus widgets.
Pekka

No puede hacer esto solo con CSS, pero creo que hay bibliotecas JS para formularios de estilo que pueden hacer esto. Google debería saberlo.
Mark Simpson

@Alberto esta pregunta ha sido la respuesta antes de los 2 años :) si usted piensa que tiene la respuesta puede insertarlo
Muath

Respuestas:


322

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.


2
@Moath Howari Te he modificado violín, mira
Praveen

@PraveenJeganathan Selectbox también tiene un error. Al hacer clic en la esquina derecha del menú desplegable, no funciona. ¿Podemos hacer algo por esto?
Manjit Singh

Lo de @Praveen es, entonces no se puede hacer clic en el lado derecho.
Tom Roggero

1
@ManjitSingh & Tom Roggero - Esto es bastante hacky, pero si necesita ese espacio se puede hacer clic se puede reemplazar display: none;con opacity: .01. Será casi imposible verlo, pero aún se podrá hacer clic en él.
chapeljuice

1
@MarcRoussel basado en este violín, esto se puede escribir como el select:hover::-ms-expandestado de desplazamiento para el pseudo elemento es como se menciona selector:state::pseudo. No pude probar con IE pero vale la pena intentarlo :)
Praveen

6

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.


4

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;
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.