Movatterモバイル変換


[0]ホーム

URL:


  1. Web
  2. CSS
  3. Référence
  4. Sélecteurs
  5. :indeterminate

Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in EnglishAlways switch to English

:indeterminate

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

Lapseudo-classeCSS:indeterminate permet de cibler un élément de formulaire dont l'état est indéterminé.

css
/* Cible n'importe quel élément <input> *//* dans un état indéterminé */input:indeterminate {  background: lime;}

Cela inclut :

Syntaxe

css
:indeterminate {  /* ... */}

Exemples

Case à cocher et bouton radio

Cet exemple applique des styles spéciaux aux étiquettes associées aux champs de formulaire indéterminés.

HTML

html
<fieldset>  <legend>Case à cocher</legend>  <div>    <input type="checkbox" />    <label for="checkbox"      >Cette case à cocher commence avec un fond vert.</label    >  </div></fieldset><fieldset>  <legend>Radio</legend>  <div>    <input type="radio" name="radioButton" value="val1" />    <label for="radio1"      >Le premier label radio commence avec un fond vert.</label    >  </div>  <div>    <input type="radio" name="radioButton" value="val2" />    <label for="radio2"      >Le deuxième label radio commence également avec un fond vert.</label    >  </div></fieldset>

CSS

css
input:indeterminate + label {  background: lime;}
fieldset {  padding: 1em 0.75em;}fieldset:first-of-type {  margin-bottom: 1.5rem;}fieldset:not(:first-of-type) > div:not(:last-child) {  margin-bottom: 0.5rem;}

JavaScript

js
const inputs = document.getElementsByTagName("input");for (const input of inputs) {  input.indeterminate = true;}

Résultat

Élémentprogress

HTML

html
<progress></progress>

CSS

css
progress {  margin: 4px;}progress:indeterminate {  width: 80vw;  height: 20px;}

Résultat

Spécifications

Specification
HTML
# selector-indeterminate
Selectors Level 4
# indeterminate-pseudo

Compatibilité des navigateurs

See also

Help improve MDN

Learn how to contribute

Cette page a été modifiée le par lescontributeurs du MDN.


[8]ページ先頭

©2009-2026 Movatter.jp