Entfernen Sie die X-Taste „Feld löschen“ des IE10 an bestimmten Eingängen?

742

Es ist zwar eine nützliche Funktion, aber gibt es eine Möglichkeit, sie zu deaktivieren?
Wenn das Formular beispielsweise ein einzelnes Textfeld ist und bereits eine Schaltfläche "Löschen" enthält, ist es überflüssig, auch das X zu haben. In dieser Situation ist es besser, es zu entfernen.

Kann man das machen und wenn ja, wie?

css internet-explorer-10 Niet the Dark Absol
quelle
1
Dies ist auch in einem Feld mit einem Standardwert nützlich, in dem Leerzeichen keinen Sinn ergeben, z. B. Menge.
Joe Flynn
4
Da dies keine Eingabe-Eingabe auslöst, ist dies sehr schwierig, wenn Sie ein Javascript-Ereignis binden.
Kiwy

Antworten:

1267

Gestalten Sie das ::-ms-clearPseudoelement für die Box:

.someinput::-ms-clear {
    display: none;
}
Ry-
quelle
14
Es ist lustig, wenn Sie den IE-Kompatibilitätsmodus verwenden, um Ihre Seite mit Engines vor IE10 zu rendern. Dieses Pseudoelement funktioniert nicht und zeigt die Schaltfläche trotzdem an.
Yousef Salimpour
@Yousef: Ja, so funktioniert es und ein Teil davon, warum Sie den Kompatibilitätsmodus auf einer tatsächlichen Website niemals verwenden sollten. Es ist nicht wirklich kompatibel :)
Ry-
@minitech - Sein IE9 auf Windows 7-Computer
ManJan
3
Dieses Steuerelement wird NUR in IE10 + unter Win8 angezeigt. Der Trick ist, dass es immer noch angezeigt wird, wenn das Dokument in einen Kompatibilitätsmodus versetzt wird.
EricLaw
48
@ EricLaw: Nun, nicht nur unter Win8. Ich verwende gerade Windows 7 und kann diese X-Schaltflächen in meinem IE10 sehen. Man könnte also sagen, dass es sich nur um eine IE10 + -Funktion handelt (allerdings nicht sicher über IE9), aber definitiv NICHT nur um Win8, da dies in der Win7-Version von IE10 erscheint. Trotzdem danke für den Tipp, @minitech!
OMA
272

Ich fand es besser ist , die zu setzen widthund heightzu 0px. Andernfalls ignoriert IE10 den im Feld definierten Abstand - padding-right-, der verhindern soll, dass der Text über das Symbol 'X' eingegeben wird, das ich dem Eingabefeld überlagert habe. Ich vermute, dass IE10 padding-rightdie Eingabe intern auf das Pseudoelement anwendet ::--ms-clearund das Ausblenden des Pseudoelements den padding-rightWert nicht wiederherstellt input.

Das hat bei mir besser funktioniert:

.someinput::-ms-clear {
  width : 0;
  height: 0;
}
jimp
quelle
3
Hier ist eine jsFiddle, die diese Problemumgehung veranschaulicht: jsfiddle.net/zoldello/S5YRj
Phil
106

Ich würde diese Regel auf alle Eingabefelder vom Typ Text anwenden, damit sie später nicht dupliziert werden muss:

input[type=text]::-ms-clear { display: none; }

Man kann sogar weniger spezifisch werden, wenn man nur:

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

Ich habe das später verwendet, bevor ich diese Antwort hinzugefügt habe, dachte aber, dass die meisten Leute es vorziehen würden, spezifischer zu sein. Beide Lösungen funktionieren gut.

Wallace Sidhrée
quelle
Danke, es hat bei mir funktioniert.
Sooraj Jose
76

Sie sollten für ::-ms-clear( http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx ) stylen :

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

Und Sie stylen auch für ::-ms-revealPseudoelement für Passwortfeld:

::-ms-reveal {
   display: none;
}
ducdhm
quelle
6
Hinweis - Überlegen Sie, ob Sie das ::-ms-revealElement zum Laufen bringen können, bevor Sie es entfernen! (Oder wenn Sie diese Schaltfläche für alle bereitstellen, wie der ursprüngliche Fragesteller.) Einige verwenden sie wirklich.
Ry-
3
@minitech - das hört sich toll an. Können Sie uns sagen, wie es mit der Javascript-Bindung bei Eingabeereignissen funktioniert? Es wird kein Ereignis ausgelöst, daher ist es fast unmöglich, damit zu arbeiten.
DarrellNorton
11

Ich denke, es ist erwähnenswert, dass alle Stil- und CSS-basierten Lösungen nicht funktionieren, wenn eine Seite im Kompatibilitätsmodus ausgeführt wird. Der Kompatibilitätsmodus-Renderer ignoriert das Element :: - ms-clear, obwohl der Browser das x anzeigt.

Wenn Ihre Seite im Kompatibilitätsmodus ausgeführt werden muss, bleibt möglicherweise die X-Anzeige hängen.

In meinem Fall arbeite ich mit einigen datengebundenen Steuerelementen von Drittanbietern. Unsere Lösung bestand darin, das Ereignis "onchange" zu behandeln und den Sicherungsspeicher zu löschen, wenn das Feld mit der Schaltfläche x gelöscht wird.

TomXP411
quelle
0

So verstecken Sie Pfeile und kreuzen eine "Zeit" -Eingabe:

#inputId::-webkit-outer-spin-button,
#inputId::-webkit-inner-spin-button,
#inputId::-webkit-clear-button{
    -webkit-appearance: none;
    margin: 0;
}
ClemPat
quelle