css3 - pseudo - Extracción de la flecha Elemento de selección IE10
pseudo class before css (5)
¡Pero !, si queremos agregar ancho, no podemos hacerlo como:
display:none
Asi que
select::-ms-expand {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 5-7 */
filter: alpha(opacity=0);
/* Good browsers :) */
opacity:0;
}
Entonces, con Mozilla y WebKit tengo una solución medio decente que reemplaza la flecha en el cuadro de select usando appearance: none; y tener un elemento padre.
En IE, en su mayor parte, desactivé esta función. Para IE10 no puedo desactivarlo porque mis comentarios condicionales no funcionan.
Aquí está mi marcado:
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)]> <html class="ie10plus"> <![endif]-->
<!--[if !(IE)]><!--> <html> <!--<![endif]-->
La clase ie10plus realidad no llega al marcado.
También siento que podría haber una manera legítima de reemplazar la flecha en IE. No me opongo a solucionar el problema. appearance: none; sin embargo, no funciona. Entonces, ¿qué puedo hacer aquí?
Evite el rastreo del navegador y los comentarios condicionales (que no son compatibles a partir de Internet Explorer 10) y, en cambio, adopte un enfoque más estándar. Con este problema en particular, debe apuntar al pseudo elemento ::-ms-expand :
select::-ms-expand {
display: none;
}
Todavía no estoy seguro de lo que está tratando de lograr, pero esto detectará y agregará una clase para ie10:
<!--[if !IE]><!--<script> if (/*@cc_on!@*/false) { document.documentElement.className+='' ie10plus''; } </script>!--<![endif]-->
Tuve un problema con una flecha desplegable oculta en el sitio en IE 10 y 11 que estoy trabajando y que usa la Fundación Zurb . Había una línea en _form.scss que tenía
select::-ms-expand {
display: none;
}
Lo eliminé y la flecha desplegable comenzó a mostrarse normalmente en todos los broswers. Gracias Jonathan por tu respuesta aquí. Esto me ayudó después de buscar mucho para encontrar una solución.
Internet Explorer 10 no admite comentarios condicionales , por lo que tendrá que hacer algo más. Una solución es olfatear el agente de usuario con JavaScript y agregar la clase usted mismo:
<script>
if (navigator.userAgent.indexOf("MSIE 10.0") !== -1) {
document.documentElement.className += " ie10";
}
</script>
Probablemente deberías agregar esto en <head> para que no tengas un flash de contenido sin estilo, pero eso podría no ser un problema.
Además, si está utilizando jQuery, es posible que desee hacer algo como esto:
if (navigator.userAgent.indexOf("MSIE 10.0") !== -1) {
$("html").addClass("ie10");
}
Si desea comprobar si hay IE10 o superior, copie y pegue la función getInternetExplorerVersion desde esta página de Microsoft y luego cambie if algo así:
if (getInternetExplorerVersion() >= 10) {
// whatever implementation you choose
}