如果选中复选框，则更改标签颜色；如果未选中复选框，则更改为红色

Question

我试图创建一个自定义复选框，因为它很难样式的本地html复选框，所以下面是我尝试过的。当我单击标签时，复选框被选中和取消选中，但当输入复选框被选中和取消选中时，我无法更改标签的边框颜色。任何帮助，想法，建议，建议，我们都非常感谢。

​

input[type="checkbox"]{display:none;}
label{
  border:1px solid red;
  width: 15px;
  height:15px;
  display:block;
}
label + input:checked{
  border-color: blue;
}

<div>
  <label>
    <input type="checkbox">
  </label>
</div>

​

Answer 1

您不能使用该层次结构(没有JavaScript)执行您想要的操作，因为没有父选择器。您需要将标签移动到复选框之后，然后使用相邻的同级组合器+

​

input[type="checkbox"] {
  display: none;
}

label {
  border: 1px solid red;
  width: 15px;
  height: 15px;
  display: block;
}

input:checked + label{
  border-color: blue;
}

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

​