diff options
Diffstat (limited to 'files/fr/web/css/_colon_checked/index.html')
| -rw-r--r-- | files/fr/web/css/_colon_checked/index.html | 104 |
1 files changed, 49 insertions, 55 deletions
diff --git a/files/fr/web/css/_colon_checked/index.html b/files/fr/web/css/_colon_checked/index.html index e29ddf49b8..fba13cef19 100644 --- a/files/fr/web/css/_colon_checked/index.html +++ b/files/fr/web/css/_colon_checked/index.html @@ -1,15 +1,15 @@ --- title: ':checked' -slug: 'Web/CSS/:checked' +slug: Web/CSS/:checked tags: - CSS - Pseudo-classe - Reference -translation_of: 'Web/CSS/:checked' +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> +<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 */ @@ -29,70 +29,64 @@ input:checked { <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; -} +<h3 id="exemple_simple">Exemple simple</h3> -#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; -} +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"> +<div> + <input type="radio" name="my-input" id="yes"> + <label for="yes">Oui</label> -#isexpanded, .expandable { - display: none; + <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; } -#isexpanded:checked ~ * tr.expandable { - display: table-row; - background: #cccccc; +/* 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; } -#isexpanded:checked ~ p.expandable, #isexpanded:checked ~ * p.expandable { - display: block; - background: #cccccc; +/* Éléments cases à cocher cochés */ +input[type="checkbox"]:checked { + box-shadow: 0 0 0 3px hotpink; } -</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> +/* Éléments options sélectionnés */ +option:checked { + box-shadow: 0 0 0 3px lime; + color: red; +} </pre> -<h3 id="Résultat">Résultat</h3> +<h4 id="résultat">Résultat</h4> -<p>{{EmbedLiveSample('Exemples','300','450')}}</p> +<p>{{EmbedLiveSample("exemple_simple")}}</p> <h2 id="Spécifications">Spécifications</h2> |