1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
---
title: '::-ms-clear'
slug: 'Web/CSS/::-ms-clear'
tags:
- CSS
- Non-standard
- Pseudo-element
- Reference
translation_of: 'Archive/Web/CSS/::-ms-clear'
---
<div>{{CSSRef}}{{Non-standard_header}}</div>
<p>Le <a href="/fr/docs/Web/CSS/Pseudo-éléments">pseudo-élément</a> <strong><code>::-ms-clear</code></strong> représente le bouton qui permet d'effacer la valeur saisie dans un champ {{HTMLElement("input")}}. Ce bouton et ce pseudo-élément ne sont pas standards et sont uniquement pris en charge par Internet Explorer 10, 11 et Edge. Le bouton est uniquement affichés pour les champs textuels {{HTMLElement("input")}} non-vides et qui ont le focus.</p>
<p>Le bouton de remise à zéro est uniquement affiché pour les contrôles textuels qui ont le focus et qui ne sont pas vides. Les contrôles concernés sont :</p>
<ul>
<li>{{HTMLElement("input/color", '<code><input type="color"></code>')}}</li>
<li>{{HTMLElement("input/date", '<code><input type="date"></code>')}}</li>
<li>{{HTMLElement("input/datetime", '<code><input type="datetime"></code>')}}</li>
<li>{{HTMLElement("input/datetime-local", '<code><input type="datetime-local"></code>')}}</li>
<li>{{HTMLElement("input/email", '<code><input type="email"></code>')}}</li>
<li>{{HTMLElement("input/month", '<code><input type="month"></code>')}}</li>
<li>{{HTMLElement("input/number", '<code><input type="number"></code>')}}</li>
<li>{{HTMLElement("input/search", '<code><input type="search"></code>')}}</li>
<li>{{HTMLElement("input/tel", '<code><input type="tel"></code>')}}</li>
<li>{{HTMLElement("input/time", '<code><input type="time"></code>')}}</li>
<li>{{HTMLElement("input/url", '<code><input type="url"></code>')}}</li>
<li>{{HTMLElement("input/week", '<code><input type="week"></code>')}}</li>
</ul>
<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>
<p>Seules les propriétés CSS suivantes peuvent être utilisées dans une règle qui contient <code>::-ms-clear</code> dans son sélecteur (les autres propriétés seront ignorées).</p>
<div class="index">
<ul>
<li>{{CSSxRef("-ms-high-contrast-adjust")}}</li>
<li>{{CSSxRef("background-clip")}}</li>
<li>{{CSSxRef("background-color")}}</li>
<li>{{CSSxRef("background-image")}}</li>
<li>{{CSSxRef("background-origin")}}</li>
<li>{{CSSxRef("background-position-x")}}</li>
<li>{{CSSxRef("background-position-y")}}</li>
<li>{{CSSxRef("background-repeat")}}</li>
<li>{{CSSxRef("background-size")}}</li>
<li>{{CSSxRef("border-bottom-color")}}</li>
<li>{{CSSxRef("border-bottom-left-radius")}}</li>
<li>{{CSSxRef("border-bottom-right-radius")}}</li>
<li>{{CSSxRef("border-bottom-style")}}</li>
<li>{{CSSxRef("border-bottom-width")}}</li>
<li>{{CSSxRef("border-left-color")}}</li>
<li>{{CSSxRef("border-left-style")}}</li>
<li>{{CSSxRef("border-left-width")}}</li>
<li>{{CSSxRef("border-right-color")}}</li>
<li>{{CSSxRef("border-right-style ")}}</li>
<li>{{CSSxRef("border-right-width")}}</li>
<li>{{CSSxRef("border-top-color")}}</li>
<li>{{CSSxRef("border-top-left-radius")}}</li>
<li>{{CSSxRef("border-top-right-radius ")}}</li>
<li>{{CSSxRef("border-top-style")}}</li>
<li>{{CSSxRef("border-top-width")}}</li>
<li>{{CSSxRef("box-shadow")}}</li>
<li>{{CSSxRef("box-sizing")}}</li>
<li>{{CSSxRef("color")}}</li>
<li>{{CSSxRef("cursor")}}</li>
<li>{{CSSxRef("display")}} (avec les valeurs <code>block</code>, <code>inline-block</code>, <code>none</code>)</li>
<li>{{CSSxRef("@font-face")}}</li>
<li>{{CSSxRef("font-size")}}</li>
<li>{{CSSxRef("font-style")}}</li>
<li>{{CSSxRef("font-weight")}}</li>
<li>{{CSSxRef("height")}}</li>
<li>{{CSSxRef("margin-bottom")}}</li>
<li>{{CSSxRef("margin-left")}}</li>
<li>{{CSSxRef("margin-right")}}</li>
<li>{{CSSxRef("margin-top")}}</li>
<li>{{CSSxRef("opacity")}}</li>
<li>{{CSSxRef("outline-color")}}</li>
<li>{{CSSxRef("outline-style")}}</li>
<li>{{CSSxRef("outline-width")}}</li>
<li>{{CSSxRef("padding-bottom")}}</li>
<li>{{CSSxRef("padding-left")}}</li>
<li>{{CSSxRef("padding-right")}}</li>
<li>{{CSSxRef("padding-top")}}</li>
<li>{{CSSxRef("transform")}}</li>
<li>{{CSSxRef("transform-origin")}}</li>
<li>{{CSSxRef("visibility")}}</li>
<li>{{CSSxRef("width")}}</li>
</ul>
</div>
<h2 id="Syntaxe"><strong>Syntaxe</strong></h2>
<pre class="syntaxbox"> <em>selecteur</em>::-ms-clear</pre>
<h2 id="Exemples">Exemples</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">input,
label {
display: block;
}
input[type=text]::-ms-clear {
color: red;<em> </em>/* La croix du bouton sera rouge. */
/* On peut cacher la croix avec display qui vaut "none" */
}</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><form>
<label for="firstname">First name:</label>
<input type="text" id="firstname" name="firstname" placeholder="First name"><br>
<label for="lastname">Last name:</label>
<input type="text" id="lastname" name="lastname" placeholder="Second name">
</form>
</pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample('Exemples')}}</p>
<p>Voici une capture d'écran du résultat obtenu avec IE 10/11 :</p>
<p> <img alt="" src="https://mdn.mozillademos.org/files/12263/ms-clear-example.png" style="display: block; height: 75px; margin: 0px auto; width: 611px;"></p>
<h2 id="Spécifications">Spécifications</h2>
<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à Trident/Microsoft et ne fait partie d'aucune spécification.</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
<p>{{Compat("css.selectors.-ms-clear")}}</p>
|
