提问者:小点点

SCSS输入复选框为选中样式


我非常感谢如果你能帮助我,我试图设置样式的2个元素的基础上的输入:签入我的SCSS,但不是工作。

<div>
<input type='checkbox' id='checkbox'></input>
<label for='checkbox'>Lorem ipsum</label>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

div {
  user-select: none;
  input {
    &:checked + label {
      background: red;
    }
    &:checked + p {
      display: block;
    }
  }
  p {
    display:none;
  }
}

https://codepen.io/ricardonas/pen/xxzvydj


共1个答案

匿名用户

如果要使段落可见,则需要更新选择器。 :checked+label表示“立即在checked元素之后获取标签”。 遵循这个逻辑,你需要针对“输入后标签后的段落”:

div {
  user-select: none;
  input {
    &:checked + label {
      background: red;
    }
    &:checked + label + p {
      display: block;
    }
  }
  p {
    display:none;
  }
}