webentwicklung-frage-antwort-db.com.de

Entfernen des IE10-Auswahlelementpfeils

Mit Mozilla und WebKit habe ich also eine halbwegs anständige Lösung, bei der der Pfeil im Feld select durch appearance: none; Ersetzt wird und ein übergeordnetes Element vorhanden ist.

In IE zum größten Teil habe ich diese Funktion deaktiviert. Für IE10 kann ich sie nicht wirklich deaktivieren, da meine bedingten Kommentare nicht wirklich funktionieren.

Hier ist mein Markup:

<!--[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]-->

Die Klasse ie10plus Schafft es nicht wirklich zum Markup.

Ich habe auch das Gefühl, dass es eine legitime Möglichkeit gibt, den Pfeil im IE zu ersetzen. Ich bin nicht dagegen, das Problem tatsächlich zu beheben. appearance: none; Funktioniert jedoch nicht. Also, was kann ich hier machen?

74
Parris

Vermeiden Sie Browser-Sniffing und bedingte Kommentare (die ab Internet Explorer 10 nicht mehr unterstützt werden) und verwenden Sie stattdessen einen Standardansatz. Bei diesem speziellen Problem sollten Sie das ::-ms-expand Pseudoelement:

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

Aber !, wenn wir die Breite hinzufügen möchten, können wir dies nicht tun, indem wir:

display:none

So

select::-ms-expand {
 /* IE 8 */
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 /* IE 5-7 */
 filter: alpha(opacity=0);
 /* Good browsers :) */
 opacity:0;
}
2
Sergey

Internet Explorer 10 unterstützt keine bedingten Kommentare , Sie müssen also etwas anderes tun. Eine Lösung besteht darin, den Benutzeragenten mit JavaScript zu durchsuchen und die Klasse selbst hinzuzufügen:

<script>
if (navigator.userAgent.indexOf("MSIE 10.0") !== -1) {
    document.documentElement.className += " ie10";
}
</script>

Sie sollten dies wahrscheinlich in das <head>, damit Sie keinen Flash mit nicht gestylten Inhalten haben, aber das könnte kein Problem sein.

Wenn Sie jQuery verwenden, möchten Sie möglicherweise Folgendes tun:

if (navigator.userAgent.indexOf("MSIE 10.0") !== -1) {
    $("html").addClass("ie10");
}

Wenn Sie nach IE10 oder höher suchen möchten, kopieren Sie die Funktion getInternetExplorerVersionvon dieser Microsoft-Seite und ändern Sie dann if in etwa die folgende:

if (getInternetExplorerVersion() >= 10) {
    // whatever implementation you choose
}
1
Evan Hahn

Ich hatte ein Problem mit einem versteckten Dropdown-Pfeil auf der Site auf IE 10 und 11, die ich verwende Zurb Foundation. Es gab eine Zeile auf dem _Formular .scss was hatte

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

Ich habe es entfernt und der Dropdown-Pfeil wurde auf allen Browsern normal angezeigt. Danke Jonathan für deine Antwort hier. Dies half mir, nachdem ich viel nach einer Lösung gesucht hatte.

0
ranjeesh