CSS3 :checked 伪类

定义和用法

CSS :checked 伪类用于匹配任何被选中的 <input> 或 <option> 元素。

这适用于 <input type="radio">、<input type="checkbox"> 以及 <select> 元素中的 <option>。

实例

例子 1

为所有被选中的 <input> 元素设置一个细的红色轮廓：

input:checked {
  outline: 1px solid red;
}

亲自试一试

例子 2

为单选按钮、复选框和选项在被选中时设置不同的样式：

input[type="radio"]:checked {
  box-shadow: 0 0 5px 3px blue;
}

input[type="checkbox"]:checked {
  box-shadow: 0 0 5px 3px maroon;
}

option:checked {
  color: blue;
  background-color: pink;
}

亲自试一试

CSS 语法

:checked {
  css declarations;
}

技术细节

浏览器支持

表格中的数字指定了完全支持该伪类的首个浏览器版本。