[分享]css中checked怎么用

CSS中的:checked伪类选择器可用于选中已选择或已激活的HTML表单元素，例如复选框或单选按钮等。使用:checked伪类选择器，我们可以为选中状态和非选中状态设置不同的样式。input:che...

CSS中的:checked伪类选择器可用于选中已选择或已激活的HTML表单元素，例如复选框或单选按钮等。使用:checked伪类选择器，我们可以为选中状态和非选中状态设置不同的样式。

input[type="checkbox"]:checked {
  /* 选中状态下的样式 */
  background-color: green;
}

input[type="checkbox"]:not(:checked) {
  /* 非选中状态下的样式 */
  background-color: red;
} 

以上代码将选中状态下的复选框背景色设置为绿色，非选中状态下的背景色设置为红色。

此外，:checked伪类选择器也可以用于处理下拉菜单和标签等其他元素的样式。下面是一个示例：

/* 下拉菜单 */
select option:checked {
  /* 选中状态下的样式 */
  font-weight: bold;
}

select option:not(:checked) {
  /* 非选中状态下的样式 */
  font-weight: normal;
}

/* 标签 */
input[type="checkbox"] ~ label {
  /* 非选中状态下的样式 */
  color: grey;
}

input[type="checkbox"]:checked ~ label {
  /* 选中状态下的样式 */
  color: black;
} 

通过使用:checked伪类选择器，我们可以轻松地设置不同类型的HTML元素选中和非选中状态下的样式。