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
138
139
140
|
---
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>
<p>Ici, on utilise la pseudo-classe <code>:checked</code> pseudo-class applied to hidden checkboxes appended at the beginning of your page could be employed in order to store some dynamic booleans to be used by a CSS rule. The following example shows how to hide/show some expandable elements by simply clicking on a button (<a class="internal" href="/@api/deki/files/6246/=expandable-elements.html" title="Expandable elements through the :checked pseudoclass">download this demo</a>).</p>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">#expand-btn {
margin: 0 3px;
display: inline-block;
font: 12px / 13px "Lucida Grande", sans-serif;
text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
padding: 3px 6px;
border: 1px solid rgba(0, 0, 0, 0.6);
background-color: #969696;
cursor: default;
border-radius: 3px;
box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
}
#isexpanded:checked ~ #expand-btn, #isexpanded:checked ~ * #expand-btn {
background: #B5B5B5;
box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
}
#isexpanded, .expandable {
display: none;
}
#isexpanded:checked ~ * tr.expandable {
display: table-row;
background: #cccccc;
}
#isexpanded:checked ~ p.expandable, #isexpanded:checked ~ * p.expandable {
display: block;
background: #cccccc;
}
</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><input type="checkbox" id="isexpanded" />
<table>
<thead>
<tr><th>Colonne 1</th><th>Colonne 2</th><th>Colonne 3</th></tr>
</thead>
<tbody>
<tr class="expandable"><td>[cellule]</td><td>[cellule]</td><td>[cellule]</td></tr>
<tr><td>[cellule]</td><td>[cellule]</td><td>[cellule]</td></tr>
<tr><td>[cellule]</td><td>[cellule]</td><td>[cellule]</td></tr>
<tr class="expandable"><td>[cellule]</td><td>[cellule]</td><td>[cellule]</td></tr>
<tr class="expandable"><td>[cellule]</td><td>[cellule]</td><td>[cellule]</td></tr>
</tbody>
</table>
<p>[Un texte normal]</p>
<p><label for="isexpanded" id="expand-btn">Afficher les éléments masqués</label></p>
<p class="expandable">[Un texte caché]</p>
<p>[Un texte normal]</p>
</pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample('Exemples','300','450')}}</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>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("css.selectors.checked")}}</p>
|
