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）执行所需操作。您需要在复选框后移动标签，然后使用相邻的兄弟组合+：

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: