html - ¿Cómo ocultar la flecha desplegable en IE8 e IE9?
css internet-explorer (5)
Utilicé el CSS a continuación para ocultar la flecha desplegable en FF, safari, cromo y agregué mi propia imagen para personalizar.
select
{
-webkit-appearance:none;
-moz-appearance:none;
-o-appearance:none;
appearance:none;
}
Para IE10, utilicé el pseudo-elemento
select::-ms-expand{
display:none;
}
No sé cómo aplicar lo mismo para IE9 e IE8. ¿Alguien puede decirme cómo ocultar la flecha desplegable en IE8 e IE9?
Has pedido una solución para IE8 e IE9.
Comencemos con IE8. Respuesta corta: no es posible. Debido a la forma en que IE8 y los cuadros de selección de procesamiento anteriores, simplemente no puede ocultar la flecha desplegable. Los controles de cuadro de selección son imposibles de configurar en IE antiguo y siempre aparecen posicionados sobre cualquier otro contenido.
Simplemente no hay ninguna solución a esto, aparte de reescribir todo el control de cuadro de selección en Javascript.
Ahora IE9. Puede ocultar la flecha de gota. No es una cosa estándar, pero puedes hackearlo.
Debe comenzar con un elemento contenedor (por ejemplo, un <div> ) alrededor de su cuadro de selección. A continuación, puede diseñar esto con un :before selector para colocar un poco más de contenido sobre la parte superior de la flecha desplegable, ocultándolo de manera efectiva.
Aquí está el CSS:
div {
position:relative;
display:inline-block;
z-index:0
}
div select {
z-index:1;
}
div:before {
display:block;
position:absolute;
content:'''';
right:0px;
top:0px;
height:1em;
width:1em;
margin:2px;
background:red;
z-index:5;
}
... y mira aquí para el jsFiddle para verlo en acción.
Tenga en cuenta que he utilizado el red como el color de superposición para que sea obvio lo que está sucediendo. Claramente en el uso normal, querrás usar blanco para que no se destaque.
También notarás que como dije antes, esto no funciona en IE8.
Obviamente, esto no es lo mismo que la solución "adecuada" para IE10 y otros navegadores, que en realidad eliminan la flecha; todo lo que estamos haciendo aquí es esconderlo. Y esto significa que terminamos con un parche blanco molesto al final del cuadro de selección donde solía estar la flecha.
Podemos hacer un mayor diseño para resolver esto: por ejemplo, si hacemos que el contenedor tenga un ancho fijo y con overflow:hidden , podemos deshacernos del parche blanco, pero luego tenemos problemas con los bordes de nuestra caja de selección quebrados, por lo que tenemos que hacer más arreglos de estilo; todo puede ser un poco complicado. Además, por supuesto, esta opción solo funciona si el cuadro de selección en sí tiene un ancho fijo conocido.
Así que ahí lo tiene: hay opciones para hacer esto en IE9. Sin embargo, no son bonitos y, francamente, puede que no valga la pena el esfuerzo. Pero si estás desesperado, puedes hacerlo.
Ah, y no olvides especificar este código CSS para que solo se ejecute en IE9, de lo contrario, provocará problemas en otros navegadores.
La única manera de lograr esto en versiones anteriores de IE es ajustar <select> en un contenedor un poco más pequeño y establecer overflow: hidden; Esto ocultaría la flecha en el lado derecho pero aún le permitirá abrir el menú desplegable haciendo clic en él. Es complicado, pero es la única manera de lograr lo que quieres.
En el pasado, estos elementos no eran edificables porque se los consideraba parte del sistema operativo. Parece que esto se está convirtiendo en un problema menor ahora que los pseudo-elementos como usted mencionaron están disponibles.
No estoy seguro de cada caso de uso, pero en mi caso con un ancho fijo x alto bg pic configurado para el padre, esto funcionó para IE y FF también:
HTML
<div id="parent">
<select>
...
</select>
</div>
CSS
#parent{
...
overflow: hidden;
width:100px; // for example
}
#parent select{
...
width:120px;
}
No se puede eliminar la flecha en CSS puro para IE9 < Es por eso que hicieron ::-ms-expand para IE10.
Sin embargo, podrías hacer algo como esto. JsLuego aquí
En este ejemplo, establece un width fijo en select y ajusta un div con un width y overflow:hidden inferior overflow:hidden para enmascarar / ocultar el menú desplegable. Tiene soporte completo. Esto esencialmente esconde la flecha en todos los navegadores.
CSS
div {
width: 80px;
overflow: hidden;
border: 1px solid black;
}
select {
width: 100px;
border: 0px;
}
Otra solución mala pero funcional para IE9: D
// CSS
div {
position:relative;
display:inline-block;
border:solid black 1px;
z-index:0
}
div select {
z-index:1;
border:none;
width:200px;
}
div:before {
display:block;
position:absolute;
content:url(''http://help.eclipse.org/mars/topic/org.eclipse.stardust.docs.enduser/html/handbooks/execution-clients/rules/images/arrow.png'');
right:-2px;
top:-1px;
padding-left:2px;
height:18px;
width:15px;
margin:2px;
background:white;
z-index:445;
border: 0;
}
Todo lo que necesita es encapsular este código con este truco de consulta de medios IE9
/* IE9 */
@media screen and (min-width:0/0) {
}
/* IE9 */