Question

我有一个包含复选框的<label>标记。如果选中该复选框，我想为该标签定义样式。到目前为止，我一直依赖JavaScript，但我发现有一个：选择器可能只用CSS做我想做的事情

这是我的HTML：

<label><input type="checkbox name="param1"> Param 1</label>

以下是我在CSS中尝试的内容：

label:has(input[type='checkbox']:checked){
    background-color: #ccc;
}

然而，在我甚至在浏览器中测试它之前，它会破坏我的SCSS编译器。我猜测有一个CSS语法错误。我的编辑器确实突出显示它似乎有错误，但我无法看到我出错的地方。

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

Answer 1

您可以使用以下内容：

input[type='checkbox'] {
  display:none;
}
label{
  height:30px;
  width:30px;
  border:1px solid red;
  display:inline-block;
}
input[type='checkbox']:checked + label{
  background-color: #000;
}

<input type="checkbox" id="id">
<label for="id"></label>

Answer 2

是的，css有:has选择器，但没有浏览器支持它。

我希望，这对您有所帮助：

input:checked + label {
  color: red;
}

<input type="checkbox" name="param1" id="rad">
<label for="rad">Param 1</label>

将样式应用于已选中复选框的<label>

2 个答案: