diff options
Diffstat (limited to 'files/fr/web/css/_colon_disabled/index.md')
| -rw-r--r-- | files/fr/web/css/_colon_disabled/index.md | 162 |
1 files changed, 67 insertions, 95 deletions
diff --git a/files/fr/web/css/_colon_disabled/index.md b/files/fr/web/css/_colon_disabled/index.md index a39b26df64..57e5ddfed8 100644 --- a/files/fr/web/css/_colon_disabled/index.md +++ b/files/fr/web/css/_colon_disabled/index.md @@ -1,115 +1,87 @@ --- title: ':disabled' -slug: 'Web/CSS/:disabled' +slug: Web/CSS/:disabled tags: - CSS - Pseudo-classe - Reference -translation_of: 'Web/CSS/:disabled' +translation_of: Web/CSS/:disabled --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:disabled</code></strong> permet de cibler un élément désactivé. Un élément est désactivé s'il ne peut pas être activé (sélectionné, cliqué ou saisi) ou s'il ne peut pas recevoir le focus de l'utilisateur. L'élément possède également un état activé dans lequel il peut être sélectionné ou recevoir le focus.</p> +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:disabled`** permet de cibler un élément désactivé. Un élément est désactivé s'il ne peut pas être activé (sélectionné, cliqué ou saisi) ou s'il ne peut pas recevoir le focus de l'utilisateur. L'élément possède également un état activé dans lequel il peut être sélectionné ou recevoir le focus. -<pre class="brush: css no-line-numbers">/* Cible tous les champs de saisie texte */ +```css +/* Cible tous les champs de saisie texte */ /* qui sont désactivés */ input[type="text"]:disabled { background: #ccc; -}</pre> +} +``` -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe {{csssyntax}} -<h2 id="Exemples">Exemples</h2> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">input[type="text"]:disabled { background: #ccc; } -</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><form action="#"> - <fieldset> - <legend>Adresse de livraison</legend> - <input type="text" placeholder="Nom"> - <input type="text" placeholder="Adresse"> - <input type="text" placeholder="Code postal"> - </fieldset> - <fieldset id="facturation"> - <legend>Adresse de facturation</legend> - <label for="facturation_livraison">Identique à l'adresse de livraison</label> - <input type="checkbox" id="facturation_livraison" onchange="javascript:toggleBilling()" checked> - <br /> - <input type="text" placeholder="Nom" disabled> - <input type="text" placeholder="Adresse" disabled> - <input type="text" placeholder="Code postal" disabled> - </fieldset> -</form> -</pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">function toggleBilling() { +## Exemples + +### CSS + +```css +input[type="text"]:disabled { background: #ccc; } +``` + +### HTML + +```html +<form action="#"> + <fieldset> + <legend>Adresse de livraison</legend> + <input type="text" placeholder="Nom"> + <input type="text" placeholder="Adresse"> + <input type="text" placeholder="Code postal"> + </fieldset> + <fieldset id="facturation"> + <legend>Adresse de facturation</legend> + <label for="facturation_livraison">Identique à l'adresse de livraison</label> + <input type="checkbox" id="facturation_livraison" onchange="javascript:toggleBilling()" checked> + <br /> + <input type="text" placeholder="Nom" disabled> + <input type="text" placeholder="Adresse" disabled> + <input type="text" placeholder="Code postal" disabled> + </fieldset> +</form> +``` + +### JavaScript + +```js +function toggleBilling() { var billingItems = document.querySelectorAll('#facturation input[type="text"]'); - for (var i = 0; i < billingItems.length; i++) { + for (var i = 0; i < billingItems.length; i++) { billingItems[i].disabled = !billingItems[i].disabled; } } -</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample('Exemples', '300px', '250px')}}</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-disabled', ':disabled')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Aucune modification.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Définition de la sémantique relative à HTML et aux formulaires.</td> - </tr> - <tr> - <td>{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}</td> - <td>{{Spec2('CSS4 Selectors')}}</td> - <td>Aucune modification.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':disabled')}}</td> - <td>{{Spec2('CSS3 Basic UI')}}</td> - <td>Référence à la spécification de niveau 3 sur les sélecteurs.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td>Définition de la pseudo-classe mais sans la sémantique associée.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("css.selectors.disabled")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li> - <p>{{cssxref(":enabled")}}</p> - </li> -</ul> +``` + +### Résultat + +{{EmbedLiveSample('Exemples', '300px', '250px')}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------ | ------------------------------------ | ---------------------------------------------------------------- | +| {{SpecName('HTML WHATWG', '#selector-disabled', ':disabled')}} | {{Spec2('HTML WHATWG')}} | Aucune modification. | +| {{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}} | {{Spec2('HTML5 W3C')}} | Définition de la sémantique relative à HTML et aux formulaires. | +| {{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}} | {{Spec2('CSS4 Selectors')}} | Aucune modification. | +| {{SpecName('CSS3 Basic UI', '#pseudo-classes', ':disabled')}} | {{Spec2('CSS3 Basic UI')}} | Référence à la spécification de niveau 3 sur les sélecteurs. | +| {{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}} | {{Spec2('CSS3 Selectors')}} | Définition de la pseudo-classe mais sans la sémantique associée. | + +## Compatibilité des navigateurs + +{{Compat("css.selectors.disabled")}} + +## Voir aussi + +- {{cssxref(":enabled")}} |