html - style - Eliminar la flecha Seleccionar en IE

select box html

Question

Tengo un elemento seleccionado, quiero quitar la flecha, luego puedo agregar otro icono ... 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;
}

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

Answer 1

En IE9, es posible con un hack puramente como lo aconseja @Spudley. Como ha personalizado el alto y ancho de div y select, necesita cambiar div:before css para que coincida con el suyo.

En caso si es IE10 entonces usando debajo de css3 es posible

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

Sin embargo, si estás interesado en el plugin jQuery, prueba Chosen.js o puedes crear el tuyo propio en js.

Answer 2

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

Answer 3

Sugeriría la solución de mina 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 despliegues cruzados personalizados en el navegador : compruébalos con todos tus navegadores para ver la función de navegación cruzada.

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 este navegador, 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 etiqueta de select y establecer nuevas reglas de fondo (como se sugirió antes).

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 reglas de appearance están configuradas en ninguna para restablecer las predeterminadas de los navegadores, si desea tener el mismo aspecto para cada flecha, debe mantenerlas en su lugar.

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

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

Flecha desplegable para Internet Explorer 8 (IE8) e Internet Explorer 9 (IE9) usando la fuente del icono

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 la select::-ms-expand para 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 regla de select CSS para más 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 IE condicional al comienzo del código. Estos IF se utilizan para unir clases específicas a la etiqueta html para reconocer el navegador IE más antiguo.

Después de eso, cada select en el HTML debe estar envuelta por un 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 simples, este contenedor se usa para simular la etiqueta de select .

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

Tenga en cuenta que no podemos usar el borde de select porque tenemos que ocultar la flecha predeterminada alargándola un 25% más que la envoltura. En consecuencia, su borde derecho no debería ser visible porque ocultamos este 25% más por el overflow: hidden regla overflow: hidden aplicada al propio select .

La fuente de icono de flecha personalizada se coloca en la pseudoclase :before donde el content la regla contiene la referencia de la flecha (en este caso, es un paréntesis de la derecha).

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 superiores e izquierdos y el tamaño de la 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 la fuente del icono, con cada una de las que desee simplemente cambiándola en la regla de la background-image o creando un archivo de fuente de icono nuevo usted mismo.