:checked

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 价值 200 美元的免费积分!

CSS 中的 :checked 伪类在元素处于选中状态时选择元素。它只与类型为单选按钮和复选框的输入 (<input>) 元素相关联. :checked 伪类选择器在选中或切换到打开状态时匹配单选按钮和复选框输入类型。如果它们未被选中或勾选,则没有匹配项。

因此,当复选框被选中时,并且您正在定位紧随其后的标签

input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
} 
input[type=checkbox]:checked + label {
  color: #f00;
  font-style: normal;
} 

标签文本将从灰色斜体变为红色正常字体。

<input type="checkbox" id="ossm" name="ossm"> 
<label for="ossm">CSS is Awesome</label> 

以上是使用 :checked 伪类使表单更易访问的示例。:checked 伪类可以与隐藏的输入及其可见的标签一起使用,以构建交互式小部件,例如图片库。

更多资源

浏览器支持

Chrome Safari Firefox Opera IE Android iOS
任何 3.1+ 任何 9+ 9+ 任何 任何