CSS - 伪类 :checked

CSS 伪类选择器 ：checked 表示选中或切换到开启状态的 <select>）元素中的任何复选框 （<input type=“checkbox”>）、radio （<input type=“radio”>） 或选项 （<option>。

可以通过选中/选择或取消选中/取消选择元素来启用或取消启用此状态。

语法


:checked {
	 	/* ... */
}

CSS ：checked 示例

下面是一个示例：checked pseudo-class for radio button。选中或选中单选按钮后，将在所选单选按钮周围应用框阴影样式。


<html>
<head>
<style>
	 	div {
	 	 	 margin: 10px;
	 	 	 padding: 10px;
	 	 	 font-size: 20px;
	 	 	 border: 3px solid black;
	 	 	 width: 200px;
	 	 	 height: 45px;
	 	 	 box-sizing: border-box;
	 	}

	 	input[type="radio"]:checked {
	 	 	 box-shadow: 0 0 0 8px red;
	 	}
</style>
</head>
<body>
	 	<h2>:checked example - radio</h2>
	 	<div>
	 	 	 <input type="radio" name="my-input" id="yes">
	 	 	 <label for="yes">Yes</label>
	 	 	 <input type="radio" name="my-input" id="no">
	 	 	 <label for="no">No</label>
	 	</div>
</body>
</html>

下面是一个示例：checked pseudo-class for checkbox。选中该复选框后，框阴影样式以及颜色和边框样式将应用于复选框及其标签。


<html>
<head>
<style>
	 	div {
	 	 	 margin: 10px;
	 	 	 font-size: 20px;
	 	}

	 	input:checked + label {
	 	 	 color: royalblue;
	 	 	 border: 3px solid red;
	 	 	 padding: 10px;
	 	}

	 	input[type="checkbox"]:checked {
	 	 	 box-shadow: 0 0 0 6px pink;
	 	}
</style>
</head>
<body>
	 	<h2>:checked example - checkbox</h2>
	 	<div>
	 	 	 <p>Check and uncheck me to see the change</p>
	 	 	 <input type="checkbox" name="my-checkbox" id="opt-in">
	 	 	 <label for="opt-in">Check!</label>
	 	</div>
</body>
</html>

下面是一个示例：checked pseudo-class for option。从列表中选择一个选项时，背景颜色将变为浅黄色，字体颜色将变为红色。


<html>
<head>
<style>
	 	select {
	 	 	 margin: 10px;
	 	 	 font-size: 20px;
	 	}

	 	option:checked {
	 	 	 background-color: lightyellow;
	 	 	 color: red;
	 	}
</style>
</head>
<body>
	 	<h2>:checked example - option</h2>
	 	<div>
	 	<h3>Ice cream flavors:</h3>
	 	 	 <select name="sample-select" id="icecream-flav">
	 	 	 	 	<option value="opt3">Butterscotch</option>
	 	 	 	 	<option value="opt2">Chocolate</option>
	 	 	 	 	<option value="opt3">Cream n Cookie</option>
	 	 	 	 	<option value="opt3">Hazelnut</option>
	 	 	 	 	<option value="opt3">Roasted Almond</option>
	 	 	 	 	<option value="opt1">Strawberry</option>
	 	 	 </select>
	 	</div> 		
</body>
</html>

打印本页