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
|
---
title: ':checked'
slug: Web/CSS/:checked
tags:
- CSS
- Pseudo-classe
- Reference
translation_of: Web/CSS/:checked
---
<div>{{CSSRef}}</div>
<p>La pseudo-classe <strong><code>:checked</code></strong> représente n'importe quel <strong>bouton radio</strong> (<code><a href="/fr/docs/Web/HTML/Element/Input/radio"><input type="radio"></a></code>), <strong>case à cocher </strong>(<code><a href="/fr/docs/Web/HTML/Element/Input/checkbox"><input type="checkbox"></a></code>) ou <strong>option</strong> ({{HTMLElement("option")}} d'un élément {{HTMLElement("select")}}) qui est coché ou activé (<code>on</code>). L'utilisateur peut modifier cet état en cliquant sur l'élément ou en sélectionnant une valeur différente auquel cas la pseudo-classe <code>:checked</code> ne s'applique plus à l'élément en question.</p>
<pre class="brush: css no-line-numbers">/* cible n'importe quel bouton radio sélectionné, case
/* à cocher cochée ou option sélectionnée */
input:checked {
margin-left: 25px;
border: 1px solid blue;
}
</pre>
<div class="note">
<p><strong>Note :</strong> Les navigateurs considèrent souvent les éléments <code><option></code> comme <a href="/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9">des éléments remplacés</a>et la possibilité de mise en forme avec <code>:checked</code> varie d'un navigateur à l'autre.</p>
</div>
<h2 id="Syntaxe">Syntaxe</h2>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<h3 id="exemple_simple">Exemple simple</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html">
<div>
<input type="radio" name="my-input" id="yes">
<label for="yes">Oui</label>
<input type="radio" name="my-input" id="no">
<label for="no">Non</label>
</div>
<div>
<input type="checkbox" name="my-checkbox" id="opt-in">
<label for="opt-in">Cochez-moi !</label>
</div>
<select name="my-select" id="fruit">
<option value="opt1">Pommes</option>
<option value="opt2">Raisins</option>
<option value="opt3">Poires</option>
</select>
</pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">
div,
select {
margin: 8px;
}
/* Libellés pour les entrées cochées */
input:checked + label {
color: red;
}
/* Éléments radio cochés */
input[type="radio"]:checked {
box-shadow: 0 0 0 3px orange;
}
/* Éléments cases à cocher cochés */
input[type="checkbox"]:checked {
box-shadow: 0 0 0 3px hotpink;
}
/* Éléments options sélectionnés */
option:checked {
box-shadow: 0 0 0 3px lime;
color: red;
}
</pre>
<h4 id="résultat">Résultat</h4>
<p>{{EmbedLiveSample("exemple_simple")}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', '#selector-checked', ':checked')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Aucune modification.</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', '#selector-checked', ':checked')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>La sémantique relative au HTML est définie.</td>
</tr>
<tr>
<td>{{SpecName('CSS4 Selectors', '#checked', ':checked')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>Aucune modification.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked')}}</td>
<td>{{Spec2('CSS3 Basic UI')}}</td>
<td>Lien avec la spécification de niveau 3 pour les sélecteurs.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Selectors', '#checked', ':checked')}}</td>
<td>{{Spec2('CSS3 Selectors')}}</td>
<td>Définition de la pseudo-classe mais pas de la sémantique associée.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("css.selectors.checked")}}</p>
|
