files/fr/web/css/_doublecolon_-ms-check/index.html


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

---
title: '::-ms-check'
slug: 'Web/CSS/::-ms-check'
tags:
  - CSS
  - Non-standard
  - Pseudo-element
  - Reference
translation_of: 'Archive/Web/CSS/::-ms-check'
---
<div>{{CSSRef}}{{Non-standard_header}}</div>

<p>Le pseudo-élément <strong><code>::-ms-check</code></strong> est <a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">une extension Microsoft</a> qui représente la marque visuelle d'un élément {{HTMLElement("input")}} de <code>type="checkbox"</code> or <code>type="radio"</code>. Ce pseudo-élément n'est pas standard et est uniquement pris en charge par Internet Explorer et Edge.</p>

<h2 id="Propriétés_autorisées">Propriétés autorisées</h2>

<p>Seules certaines propriétés CSS peuvent être utilisées au sein d'une règle dont le sélecteur contient <code>::-ms-check</code>. Les autres propriétés seront ignorées.</p>

<div class="index">
<ul>
 <li>{{CSSxRef("-ms-background-position-x")}}</li>
 <li>{{CSSxRef("-ms-background-position-y")}}</li>
 <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-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")}} (valeurs <code>block</code>, <code>inline-block</code> et <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">Syntaxe</h2>

<pre class="syntaxbox"><em>selecteur</em>::-ms-check
</pre>

<h2 id="Exemples">Exemples</h2>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">input, label {
  display: inline;
}

input[type=radio]::-ms-check {
  /* Le cercle sera rouge comme l'option sera sélectionnée. */
  color: red;
  /* La bordure de l'élément sera rouge si l'option est sélectionnée */
  border-color: red;
}

input[type=checkbox]::-ms-check {
  /* La coche sera verte quand la case sera cochée. */
  color: green;
  /* La bordure de l'élément sera verte si la case est cochée */
  border-color: red;
}</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;form&gt;
  &lt;label for="redButton"&gt;Rouge&lt;/label&gt;
  &lt;input type="radio" id="redButton"&gt;&lt;br&gt;
  &lt;label for="greenCheckbox"&gt;Verte&lt;/label&gt;
  &lt;input type="checkbox" id="greenCheckbox"&gt;
&lt;/form&gt;</pre>

<h3 id="Résultat">Résultat</h3>

<p>La capture d'écran à gauche illustre le résultat obtenu avec Internet Explorer ou Edge.</p>

<p>{{EmbedLiveSample('Exemples', '', '', 'https://mdn.mozillademos.org/files/15814/ie11-example.PNG', 'Web/CSS/::-ms-check')}}</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-check")}}</p>