CSS - 伪类 :indeterminate

CSS 伪类选择器 :indeterminate 表示状态不确定或未知的元素。

更具体地说， :indeterminate 伪类面向以下元素：

复选框 - <input type=“checkbox”>其不确定值设置为 true。
单选按钮 - <input type=“radio”>其单选按钮组未列出任何选中的单选按钮。
progress 元素 - <progress>处于不确定状态，即没有 value 属性。

语法


:indeterminate

CSS ：不确定示例

下面是一个示例：不确定的伪类，用于 checkox 和单选按钮：


<html>
<head>
<style>
	 	input[type="checkbox"]:indeterminate {
	 	 	 box-shadow: 0 0 5px 5px rgb(224, 5, 5);
	 	}

	 	input[type="radio"]:indeterminate {
	 	 	 box-shadow: 0 0 5px 5px rgb(17, 235, 28);
	 	}

	 	div {
	 	 	 padding: 10px;
	 	}
</style>
</head>
<body>
	 	<h2>:indeterminate selector example</h2>
	 	<form>
	 	 	 <div>
	 	 	 	 	<input type="checkbox" id="box"> Checkbox
	 	 	 </div>
	 	 	 <div>
	 	 	 	 	<input type="radio" id="box1"> Radio
	 	 	 </div>
	 	 	 <script>
	 	 	 	 	var checkbox=document.getElementById("box");
	 	 	 	 	checkbox.indeterminate=true;

	 	 	 	 	var radio=document.getElementById("box1");
	 	 	 	 	radio.indeterminate=true;
	 	 	 </script>
	 	</form>
</body>
</html>

下面是一个示例 :indeterminate pseudo-class for radio button group：


<html>
<head>
<style>
	 	label {
	 	 	 margin-right: .5em;
	 	 	 position: relative;
	 	 	 top: 1px;
	 	}
	 	input[type="radio"]:indeterminate + label {
	 	 	 color: magenta;
	 	 	 font-size: larger;
	 	}
	 	form {
	 	 	 border: 3px solid black;
	 	 	 width: 500px;
	 	}
</style>
</head>
<body>
	 	<h2>:indeterminate selector example</h2>
	 	<form>
	 	 	 <p>The state of radio button group is indeterminate, hence CSS styling applied.</p>
	 	 	 <p>Select any radio button and see the change:</p>
	 	 	 <input type="radio" name="option" value="true" id="true">
	 	 	 <label for="true">True</label>
	 	 	 <input type="radio" name="option" value="false" id="false">
	 	 	 <label for="false">False</label>
	 	 	 <input type="radio" name="option" value="unknown" id="unknown">
	 	 	 <label for="unknown">Unknown</label>
	 	</form>
</body>
</html>

下面是一个示例：indeterminate pseudo-class for progress element：


<html>
<head>
<style>
	 	progress {
	 	 	 margin: 8px;
	 	}

	 	progress:indeterminate {
	 	 	 width: 300px;
	 	 	 height: 50px;
	 	}
</style>
</head>
<body>
	 	<h2>:indeterminate selector example - progress</h2>
	 	<progress></progress>
</body>
</html>

打印本页