UPDATE: Wie der andere Antworter wies darauf hin, hat die MS Dokumentation Juni 19 aktualisiert 2013 alle Eigenschaften zur Verfügung zu ::-ms-clear umfassen. Es ist unklar, ob dies für IE10 und nicht für den aktuell erscheinenden IE11 gilt. Daher werde ich den Rest der Antwort unten lassen.
Der Vollständigkeit halber haben sie auch die Dokumentation für ::-ms-reveal aktualisiert, die genau so zu sein scheint wie ::-ms-clear.
Die folgende Antwort gilt zumindest für IE10.
ich keine erschöpfende Liste finden können, was mich zu Experimentieren führen:
::-ms-clear {
margin: *; /* except margin-left */
background: *;
color: *;
display: none|block;
visibility: *;
}
Leider war ich dazu verleiten, nicht in der Lage IE Entwickler-Modus (F12) mir die ::-ms-clear Eigenschaften im Stil zeigt Baum, also musste ich die Dinge von Hand ausprobieren und die Seite neu laden, um zu experimentieren. Ich habe sogar versucht zu betrügen, indem ich onblur=this.focus() hinzugefügt habe, aber das hat nicht funktioniert.
CSS-Eigenschaften, die etwas getan haben, und schienen nützlich:
margin: Die Marge gab mir einen Weg, um es von der rechten Seite der Textbox zu verschieben. Ich habe es um die Größe meiner Symbole und um 1 bis 3 Pixel verschoben, um einen Puffer zu erhalten. Nur margin-left scheint nicht zu funktionieren.background: Der Hintergrund nur der x. Wenn Sie eine der Einstellungen background anwenden, wird Ihr gewünschter Inhalt dahinter gespeichert. Es ersetzt nicht die x!color: Steuert die Farbe der x.display: Als die Frage, die mich hier Notizen, none hat, wird die x verstecken.visibility: Scheint zu funktionieren, wie man erwarten würde ähnlich wie display.
Sie können kombinieren die color und background zu die x mit einem anderen Hintergrundbild ersetzen, solange es innerhalb der vorgegebenen Größe des x passt, die um 20px zu sein scheint, aber das ist nur ich sehe es an.
::-ms-clear {
color: transparent;
background: no-repeat url("../path/to/image") center;
}
CSS-Eigenschaften, die etwas tat, aber nicht sinnvoll erscheinen:
padding: Es betrifft die x, aber nie wie ich erwartet hatte tatsächlich seine Wirkung (alles schien auf das Symbol zu verstecken, oder zumindest aus der Sicht verschieben).position: Identisches Verhalten wie padding. Zugegebenermaßen bin ich viel mehr ein Programmierer als ein Designer, also mag das mein eigener Mangel sein.
CSS-Eigenschaften, die ich vermutete, könnte etwas tun, aber das tat nichts:
andere CSS Pseudo-Elemente Hinzufügen von nicht ::-ms-clear beeinflussen. Genauer gesagt habe ich versucht ::after und ::before darauf mit content: "y", und keiner hat ein Ergebnis.
Offensichtlich hängt es von der Größe des Begleiter-Symbol, das Sie in die Textbox beantragen wollen, aber ich benutze 14-16px Symbole und ich fand, dass margin-right: 17px die x eine klare Lücke gab, die die x nach links verschiebt von mein rechtsbündiges Symbol. Interessanterweise scheint margin-left keinen Effekt zu haben, aber Sie können einen negativen Wert für margin-right verwenden.
Die tatsächliche CSS, die ich am Ende verwendet, die verhindert, dass mein Symbol von der x abgedeckt wird.
[class^="tbc-icon-"]::-ms-clear, [class*=" tbc-icon-"]::-ms-clear {
margin-right: 17px;
}
Meine Icons alle teilen den gleichen Basisnamen, tbc-icon-, was bedeutet, dass das ::-ms-clear Pseudoelement automatisch auf alle von ihnen angewandt wird, wenn sie angewendet werden. In allen anderen Fällen verhält sich das Pseudo-Element in seiner Standard-Art.
Von Interesse scheint ::-ms-reveal die gleiche Art und Weise zu verhalten, und wenn Sie die Symbole auf Kennwortfelder anwenden wollen (weit weniger wahrscheinlich, erwarte ich), dann kann man das obige Beispiel folgen:
[class^="tbc-icon-"]::-ms-clear, [class*=" tbc-icon-"]::-ms-clear,
[class^="tbc-icon-"]::-ms-reveal, [class*=" tbc-icon-"]::-ms-reveal {
margin-right: 17px;
}
Ich denke, der Grund, warum ':: after' und' :: before' keine Auswirkungen haben ist nicht wegen der ':: - ms- clear ', aber weil' :: ms-clear' sich auf 'input'-Elemente bezieht, die keinen generierten Inhalt haben können, da sie keinen * any * Inhalt haben (also leere Elemente sind). Es sei denn natürlich, dass sich in IE10/IE11 etwas geändert hat, was ich bezweifle. – BoltClock
@BoltClock Ich bin ziemlich sicher, dass Sie Recht haben. Ich glaube, dass ich nur gehofft hatte, dass es interaktiver war, weil es etwas Besonderes war. – pickypg