Internet Explorer 10 Windows 8 Entfernen Sie Texteingabe- und Kennwortaktionssymbole

70

Ich teste eine hochgradig angepasste Webanwendung in Internet Explorer 10 unter Windows 8, da es sich um eine aufstrebende Version handelt und meine Anwendung wahrscheinlich eines Tages verwendet wird. Schauen Sie sich diesen Beispiel-Screenshot einiger Steuerelemente für die Texteingabe aus der Anwendung an:

Geben Sie hier die Bildbeschreibung ein

Gibt es eine Möglichkeit, innerhalb von HTML oder CSS die Aktionssymbole zu entfernen, die sich rechts neben den Steuerelementen für die Text- und Kennworteingabe befinden?

Vielen Dank für Ihre Zeit.

html css internet-explorer windows-8 internet-explorer-10 Oliver Spryn
quelle

Antworten:

105

Sie müssen das Pseudoelement -ms-clear verwenden . Verwenden Sie -ms-disclose für das Kennwortfeld.

Dies sollte es tun:

  ::-ms-clear {
      display: none;
  }
i_am_jorf
quelle
5
Ich muss zugeben, dass eine Antwort von jeffamaphone im IE nicht funktioniert, wenn es sich im IE7-9-Modus befindet. Aber in IE 10 funktioniert es großartig.
Inkwai
14
Nun, es gab es in IE7-9 nicht. Es kann ein Fehler sein, den diese Dekorateure in Kompatibilitätsmodi anzeigen. Ich müsste einen Berg besteigen, einige der lokalen Kräuter einnehmen und ein paar Tage darüber meditieren, und dafür habe ich keine Zeit. Die Leute unter connect.microsoft.com/ie könnten es jedoch tun , wenn Sie dort einen Fehler melden .
i_am_jorf
Win8 IE10 für eine Website mit einem Meta-Tag wie dem folgenden: <meta http-equiv = "X-UA-kompatibel" content = "IE = 7"> funktioniert ebenfalls nicht. Vermutlich, weil der :: Selektor nicht interpretiert wird. Ein weiterer Thread zum Thema hier: answers.microsoft.com/en-us/ie/forum/ie10-windows_8/…
jfroom
@pure_code ::ist das CSS3-Präfix für Pseudoelemente . w3.org/TR/css3-selectors/#pseudo-elements
Matt Ball
@pure_code Lesen Sie die Antwort, die wir kommentieren. Das ist alles was du brauchst.
Matt Ball
22

Sie sollten dies stattdessen aus dem Grund in dieser Antwort verwenden .

/* don't show the x for text inputs */
::-ms-clear {
    width : 0;
    height: 0;
}

/* don't show the eye for password inputs */
::-ms-reveal {
    width : 0;
    height: 0;
}
Emre
quelle
5

Die Antwort von jeffamaphone funktioniert nur, wenn sich der Browser im Kompatibilitätsmodus befindet:

Sie müssen das Pseudo-Element -ms-clear verwenden. Verwenden Sie -ms-disclose für das Kennwortfeld.

Dies sollte es tun:
:: - ms-clear {display: none;
}}

Wenn sich der Browser jedoch im Kompatibilitätsmodus befindet, wird das Enthüllungssymbol weiterhin angezeigt. Um dies zu umgehen, zwingen Sie den Browser mit diesem Tag <meta http-equiv = "x-ua-compatible" content = "IE = edge"> in den IE10-Modus

MattCT
quelle
Ich schaue auf eine Seite und der einzige Stil ist ::-ms-reveal { display: none; }und ich bin im Kompatibilitätsmodus und es gibt kein Auge (das Entfernen des Stils bringt es zurück). Ich bin auf IE10 Win7.
CWSpear
Gibt es eine Möglichkeit, es zum Laufen zu bringen, wenn ich mit einer Seite feststecke, die IE7-kompatibel sein muss? Jetzt werden die CSS-es ignoriert (und ich kann immer noch das x sehen).
Kaczor1984
2

Entfernen Sie Aktionssymbole aus Textfeldern in Internet Explorer 10, verwenden Sie einfach dieses CSS-Pseudoelement

 ::-ms-clear { 
  display: none; }

Entfernen Sie Aktionssymbole aus Kennwortfeldern in Internet Explorer 10, verwenden Sie einfach dieses CSS-Pseudoelement

::-ms-reveal
 {
   display: none; 
  }
Pushker Yadav
quelle
4
Nur um pedantisch zu sein, das sind Pseudoelemente , keine Klassen.
Chris
Lieb mich etwas Pedanterie!
Vbullinger
0

Ich habe keine Windows 8-Vorschau, aber haben Sie versucht, nur ein benutzerdefiniertes Eingabefeld mit HTML und CSS zu erstellen? Versuchen Sie dies vielleicht: http://www.webdesign4me.nl/Knowledge-Base/custom-input-field-using-html-and-css

JudeJitsu
quelle
Das obige Beispiel zeigt eine benutzerdefinierte Texteingabe mit abgerundeten Ecken, rotem Rand und Kastenschatten. Die "Standard" -Texteingabe sieht nicht viel anders aus als in der vorherigen Version von IE / Windows. Ich versuche nur, die Aktionssymbole zu entfernen, auf die ich im obigen Bild hingewiesen habe. Leider wendet Windows 8 in dem Link, den Sie mir gegeben haben, immer noch das Aktionssymbol an.
Oliver Spryn
0

Die Lösung für IE10-docmode "Standard" wurde bereits veröffentlicht.

Ich habe übrigens eine Art Problemumgehung gefunden, die vom IE10-docmode unabhängig ist. Wenn Sie damit leben können, die Breite aller Eingänge auf maximal 80 Pixel zu ändern, verwenden Sie die folgende Abfrage:
$("input[type=text]").width(80);

Oursopodiac
quelle
Ich frage mich, ob es eine Möglichkeit gibt, mit Polstern / Rändern etwas zu tun, das einen ähnlichen Effekt hätte. Ich habe noch nichts herausgefunden. Außerdem "mache ein verstecktes Div über das x", was ich einfach nicht tun werde.
Vbullinger
0

Vielleicht nicht die beste Lösung, aber wenn eine der anderen Lösungen auf dieser Seite für Sie nicht funktioniert, versuchen Sie dies.

Platzieren Sie ein leeres Hintergrundbild auf dem: vor der Eingabe. Genauer gesagt - ich hatte meinen eigenen klaren Button wie die Website gestaltet, und der IE legte seinen eigenen unter. Ich habe das ursprüngliche transparente PNG mit meinem klaren Symbol mit einem soliden Hintergrund geändert.

Andere Browser sehen keinen Unterschied und blockieren die Schaltfläche zum Löschen des IE. Funktioniert nur, wenn sich die eingegebene Hintergrundfarbe nicht ändert, nehme ich an.

Mechow
quelle