From 3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Fri, 17 Sep 2021 20:15:31 +0200 Subject: Prepare CSS section for Markdown conversion (#2307) * Removes summary / seoSummary classes * Remove div class=hidden and some notranslate * Remove hidden paragraphs for live sample * Remove hidden paragraphs for live sample - take 2 * Remove other hidden div and p - updated w/ en-US when necessary * Remove ids * Remove notranslate class * Fix typo which broke build * remove div class='index' * remove useless * remove non typographical sups * remove non typographical subs * remove blockindicator and fix some div.note * fix build :/ * remove useless classes * fix build - again :x * fix unhandled elements 1/N + embedlivesample build fail * fix div.warning * Fix fixable flaws - hoping to reduce error conversion * Remove unecessary images (same as en-US) * fix div notes * fix warnings * fix some dl handling * fix dls * Fix a bunch of conversion errors * rm unhandled figures * Fix other set of issues and revamp easing-function page * Fix some one-offs conversion errors (incl. deki files) * fix the rest of one-off conversion issues * Fix last dl standing --- files/fr/web/css/_colon_checked/index.html | 104 ++++++++++++++--------------- 1 file changed, 49 insertions(+), 55 deletions(-) (limited to 'files/fr/web/css/_colon_checked') 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 ---
{{CSSRef}}
-

La pseudo-classe :checked représente n'importe quel bouton radio (<input type="radio">), case à cocher (<input type="checkbox">) ou option ({{HTMLElement("option")}} d'un élément {{HTMLElement("select")}}) qui est coché ou activé (on). 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 :checked ne s'applique plus à l'élément en question.

+

La pseudo-classe :checked représente n'importe quel bouton radio (<input type="radio">), case à cocher (<input type="checkbox">) ou option ({{HTMLElement("option")}} d'un élément {{HTMLElement("select")}}) qui est coché ou activé (on). 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 :checked ne s'applique plus à l'élément en question.

/* cible n'importe quel bouton radio sélectionné, case
 /* à cocher cochée ou option sélectionnée */
@@ -29,70 +29,64 @@ input:checked {
 
 
Exemples

 
-
Ici, on utilise la pseudo-classe :checked 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 (download this demo).

-
-
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;
-}
+
Exemple simple

 
-#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;
-}
+
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>
+

+
+
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;
 }
-

 
-
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;
+}
 

 
-
Résultat

+
Résultat

 
-
{{EmbedLiveSample('Exemples','300','450')}}

+
{{EmbedLiveSample("exemple_simple")}}

 
 
Spécifications

 
-- 
cgit v1.2.3-54-g00ecf