CARVIEW |
Select Language
HTTP/2 200
content-type: text/html
x-guploader-uploadid: AAwnv3KxUH7c2WFjDsROreeZoVunEUtgwIwfOgEomUcuTPaeAyDfm8Oa3E72LP5F1thNOPAp
cache-control: public, max-age=3600
expires: Sun, 12 Oct 2025 00:24:09 GMT
last-modified: Fri, 10 Oct 2025 01:09:14 GMT
etag: W/"c89bf1e4b760802b392a9e2f42b57414"
x-goog-generation: 1760058554888589
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 277662
x-goog-meta-goog-reserved-file-mtime: 1760056700
x-goog-hash: crc32c=shj9sQ==, md5=yJvx5LdggCs5Kp4vQrV0FA==
x-goog-storage-class: STANDARD
accept-ranges: none
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
alt-svc: clear
referrer-policy: strict-origin-when-cross-origin
x-content-type-options: nosniff
strict-transport-security: max-age=63072000
content-security-policy: default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net https://api.stripe.com; font-src 'self'; frame-src 'self' interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net mdn.github.io live-samples.mdn.mozilla.net live-samples.mdn.allizom.net *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.googleusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/ https://*.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
x-frame-options: DENY
origin-trial: AxVILwizhbMjxFeHOn1P3R8niO1RJY/smaK4B4d1rLzc1gTaxtXMSaTi+FoigYgCw40uFRDwFcEAeqDR+vVLOW4AAABfeyJvcmlnaW4iOiJodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZyIsImZlYXR1cmUiOiJQcml2YXRlQXR0cmlidXRpb25WMiIsImV4cGlyeSI6MTc0MjA3OTYwMH0=
x-cloud-trace-context: 6ef5ffbb29e30be74b360d7a76a5ef9b
date: Sat, 11 Oct 2025 23:24:10 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
:indeterminate - CSS | MDN
Toggle sidebar
>
Élément
Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
:indeterminate
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since juillet 2015.
La pseudo-classe CSS :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 :
- un élément
<input type="checkbox">
dont la propriété du DOMindeterminate
est fixée àtrue
via du code JavaScript - des éléments
<input type="radio">
dont tous les boutons radio du groupe sont décochés - des éléments
<progress>
dans un état indéterminé.
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" id="checkbox" />
<label for="checkbox"
>Cette case à cocher commence avec un fond vert.</label
>
</div>
</fieldset>
<fieldset>
<legend>Radio</legend>
<div>
<input type="radio" id="radio1" name="radioButton" value="val1" />
<label for="radio1"
>Le premier label radio commence avec un fond vert.</label
>
</div>
<div>
<input type="radio" id="radio2" 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ément progress
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
Loading…
See also
- Table de compatibilité des propriétés pour les widgets de formulaire
- Mise en forme des formulaires
- La propriété
indeterminate
de l'élément<input type="checkbox">
- L'élément
<input>
et l'interfaceHTMLInputElement
qui l'implémente. - Le sélecteur CSS
:checked
vous permet de mettre en forme les cases à cocher en fonction de leur état (coche ou non)