Question

我正在使用一种方法来设置我的复选框样式，这需要将复选框输入放在标签内，而不是作为兄弟。如果选中输入，我想使标签文本变为粗体，但我不确定这是否可以使用直接CSS，因为没有父选择器且输入在标签内。是否可以在不使用Javascript的情况下修改标签文本的CSS？

＆＃13;

label {
  padding-left:35px;
  position:relative;
}
input {
  position:absolute;
  opacity:0;
  cursor:pointer;
}
  label .checkmark {
    position:absolute;
    top:0;
    left:0;
    height:25px;
    width:25px;
    background:#ccc;
  }
    input:checked ~ .checkmark {
      background:green;
    }

＆＃13;

<label>
  Label text (should be bold when checked)
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

＆＃13;

Answer 1

你可以试试这个：

label {
  padding-left: 35px;
  position: relative;
}

input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

label .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background: #ccc;
}

input:checked~.checkmark {
  background: green;
}

input:checked~.text {
  font-weight: bold;
}

<label>
  <input type="checkbox">
  <span class="checkmark"></span>
   <span class="text">Label text (should be bold when checked)</span>
</label>

复选框输入在标签内时标签文本的CSS？

1 个答案: