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>
