:indeterminate
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨2015å¹´7æâ©.
:indeterminate CSS 伪类表示任æçç¶æä¸ç¡®å®ç表åå
ç´ ï¼ä¾å¦é£äºå° HTML indeterminate 屿§è®¾ç½®ä¸º true çå¤éæ¡ï¼ä»¥åå±äºæä¸ªç»ä¸è¯¥ç»ä¸ææåéæé®é½æªéä¸çåéæé®ï¼è¿æä¸ç¡®å®ç¶æç <progress> å
ç´ ã
css
/* éä¸ä»»æçç¶æä¸ç¡®å®ç <input> */
input:indeterminate {
background: lime;
}
æ¤éæ©å¨é对çå ç´ æ¯ï¼
<input type="checkbox">å ç´ ï¼å ¶indeterminate屿§è¢« JavaScript 设置为trueæ¶ã<input type="radio">å ç´ ï¼å½è¡¨åä¸å ·æç¸ååç§°å¼çææåéæé®åæªè¢«é䏿¶ã- å¤äºä¸ç¡®å®ç¶æç
<progress>å ç´
è¯æ³
:indeterminate
示ä¾
>å¤éæ¡ååéæé®
è¿ä¸ªç¤ºä¾å°ç¹æ®æ ·å¼åºç¨äºä¸ä¸ç¡®å®è¡¨ååæ®µå ³èçæ ç¾ã
HTML
html
<fieldset>
<legend>Checkbox</legend>
<div>
<input type="checkbox" id="checkbox" />
<label for="checkbox">This checkbox label starts out lime.</label>
</div>
</fieldset>
<fieldset>
<legend>Radio</legend>
<div>
<input type="radio" id="radio1" name="radioButton" value="val1" />
<label for="radio1">First radio label starts out lime.</label>
</div>
<div>
<input type="radio" id="radio2" name="radioButton" value="val2" />
<label for="radio2">Second radio label also starts out lime.</label>
</div>
</fieldset>
CSS
css
input:indeterminate + label {
background: lime;
}
JavaScript
js
const inputs = document.getElementsByTagName("input");
for (let i = 0; i < inputs.length; i++) {
inputs[i].indeterminate = true;
}
ç»æ
è¿åº¦æ¡
HTML
html
<progress></progress>
CSS
css
progress {
margin: 4px;
}
progress:indeterminate {
width: 80vw;
height: 20px;
}
ç»æ
è§è
| Specification |
|---|
| HTML > # selector-indeterminate > |
| Selectors Level 4 > # indeterminate-pseudo > |
æµè§å¨å ¼å®¹æ§
åè§
- Web 表åââå¤çç¨æ·æ°æ®
- æ ·å¼å Web 表å
<input type="checkbox">å ç´ çindeterminate屿§<input>åå®ç°å®çHTMLInputElementæ¥å£:checkedCSS éæ©å¨å¯ä»¥è®©ä½ æ ¹æ®å¤éæ¡æ¯å¦è¢«é䏿¥è®¾ç½®æ ·å¼