Entfernen des IE10 Select Element Arrow

75

Mit Mozilla und WebKit habe ich also eine halbwegs anständige Lösung, bei der der Pfeil auf der selectBox durch appearance: none;ein übergeordnetes Element ersetzt wird.

Im IE habe ich diese Funktion größtenteils deaktiviert. Für IE10 kann ich es nicht deaktivieren, da meine bedingten Kommentare nicht 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 ie10plusschafft es nicht wirklich zum Markup.

Ich habe auch das Gefühl, dass es einen legitimen Weg gibt, den Pfeil im IE zu ersetzen. Ich bin nicht dagegen, das Problem tatsächlich zu beheben. appearance: none;funktioniert jedoch nicht. Was kann ich hier tun?

css internet-explorer-10 conditional-statements Parris
quelle
Was? Sie möchten das Erscheinungsbild festlegen: Keine für ie10, wie Sie es für Gecko und Firefox tun? ie10 sollte diesen Stil erhalten, wenn er in Ihrem Stylesheet festgelegt ist. Sie können die anderen ies mit Bedingungen ansprechen und das Haupt-Stylesheet für die echten Browser
bereitstellen
@ Albert Aussehen: keine Art von Arbeiten. Der Pfeil für das Auswahlfeld wird jedoch nicht entfernt.
Parris
Ah. mb. Also, was ist deine Frage? wie zu erkennen und eine Klasse zu ie10?
Albert
@ Albert Ich denke, ich habe 2 Fragen gestellt. Können wir den Auswahlpfeil entfernen, wie und wenn nicht, wie können wir eine Bedingung für ie10 hinzufügen?
Parris
idk über das Entfernen als ie10 unterstützt nicht <code> Aussehen </ code>, aber ich antwortete unten, wie man ie10 als Ziel hat und eine Klasse zum <code> html </ code> -Element hinzufügt
albert

Antworten:

298

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 auf das ::-ms-expandPseudoelement abzielen :

select::-ms-expand {
    display: none;
}
Sampson
quelle
1
@Parris Danke. Ich hoffe, Sie fühlen sich bei der Implementierung dieser Lösung wohler als bei anderen gängigen Ansätzen.
Sampson
@ JonathanSampson Ich suchte tatsächlich nach einer solchen Änderung.
Parris
2
Das ist großartig, danke: D Leider funktioniert es in IE9 nicht :(
Pawcu
@ JonathanSampson Ich möchte den Standard-Dropdown-Pfeil in ie-8 & ie-9 ausblenden. Ich weiß nicht, wie ich in ie-8 & ie-9
vorgehen soll. Können
@ user2681579 Sie können das für IE8 oder IE9 nicht entfernen. Sie müssten das native Element durch eine skriptbasierte Alternative ersetzen oder einen Weg finden, diesen Teil des ausgewählten Elements zu maskieren. Meiner Meinung nach ist es besser, es einfach zu ersetzen.
Sampson
2

Aber!, Wenn wir Breite hinzufügen möchten, können wir dies nicht tun als:

display:none

Damit 

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

Internet Explorer 10 unterstützt keine bedingten Kommentare , daher müssen Sie etwas anderes tun. Eine Lösung besteht darin, den Benutzeragenten mit JavaScript zu beschnüffeln 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 hinzufügen, <head>damit Sie keinen Flash mit nicht gestylten Inhalten haben, aber das ist möglicherweise kein Problem.

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 getInternetExplorerVersionFunktion von dieser Microsoft-Seite und fügen Sie sie ifin etwa so ein:

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

Ich hatte ein Problem mit einem versteckten Dropdown-Pfeil auf der Site in IE 10 und 11, an dem ich arbeite und der die Zurb Foundation verwendet . Es gab eine Zeile auf der _form.scss, die hatte

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

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

Ranjeesh
quelle
1
Bitte verwenden Sie Kommentare für diese Art von Dingen, keine zusätzliche Antwort.
Ben Black
Das unerwartete Verhalten der Zurb Foundation hat mich hierher gebracht, danke für die Antwort oder den Kommentar! ;)
Patrick Jones
-1

Ich bin mir immer noch nicht sicher, was Sie erreichen möchten, aber dies erkennt und fügt eine Klasse für ie10 hinzu:
<!--[if !IE]><!--<script> if (/*@cc_on!@*/false) { document.documentElement.className+=' ie10plus'; } </script>!--<![endif]-->

albert
quelle
Ich bin mir nicht sicher, warum dies abgelehnt wurde ... Ich denke, Johnathon Sampsons Antwort ist eleganter und sollte gewählt werden. aber runter gestimmt? schwache Soße.
Albert
Dies wird abgelehnt, da es ein Hack ist, IE10 zu zwingen, bedingte Kommentare zu erkennen. Der "Standardansatz" der akzeptierten Antwort besteht darin, diese Hersteller- Pseudoelemente
Benxamin
1. Ihre Technik ist im IE-Standardmodus gemäß dem Link in Evans Antwort fehlerhaft (HTML-Bedingungen in IE10 entfernt und JS-Bedingungen in IE11 entfernt - weil sie nicht Standard waren). 2. Herstellerpräfixe sind die Standardmethode für die Verarbeitung browserspezifischer Funktionen.
Robocat
Danke für die Geschichtsstunde. Ich bin mir sehr wohl bewusst und diese Technik funktioniert immer noch
Albert