当前位置主页 > 资料库 > 前端教程 > :checked | CSS属性参考

:checked | CSS属性参考

2016-09-02
麦子学院

CSS :checked伪类用于匹配被用户选中的单选按钮Radio或复选按钮checkbox。

:checked伪类用于匹配页面中的<input type="checkbox">,或<input type="radio">,或在<select></select>元素中的<option></option>选项,当这些元素处于选中状态时,就会被添加:checked伪类。

你可以在<input type="radio"><input type="checkbox">中使用checked属性,或在下拉列表的option选项中使用selected选项来表明该项目被选中。

<input type="radio" checked>
<input type="checkbox" checked>
<select name="options" id="list">
    <option value="Something" selected>This option is selected</option>
    <option value="Something-else">This one is not</option>
</select>

单选按钮和复选按钮默认为:checked状态,你可以通过单击来取消选中状态。

:checked伪类和label标签配合使用,可以制作出一些有趣的视觉效果。例如下面的例子,在复选框处于选中状态时,复选框的文本会被设置为红色。

<input type="checkbox" id="todo">
<label for="todo">是否选中?</label>
input[type = "checkbox"]:checked + label {
    color: red;
}

得到的结果如下:

示例代码
/* 表示页面上的所有选中的radio按钮 */
input[type="radio"]:checked{
    width: 20px;
    height: 20px;
}

/* 表示页面上的所有选中的checkbox按钮 */
input[type="checkbox"]:checked{
  color: red;
}

/* 表示页面上的所有选中的select的选项 */
option:checked{
  color: green;
}
在线演示

下面的例子使用:checked伪类来自定义复选框的样式。

浏览器支持

所有的现代浏览器都支持:checked 伪类,包括:Chrome, Firefox, Safari, Opera9+, Internet Explorer 9+ 以及 Android 和 iOS。

相关阅读
Previous:
上一篇::visited | CSS属性参考
Next:
下一篇::disabled | CSS属性参考

我要评论

返回顶部