使用 CSS、复选框和选择器来控制表单域的可见性

Question

我正在尝试使用复选框来控制字段的可见性。下面的代码工作正常，但理想情况下我想将复选框和标签字段放在段落标记中，这样我就可以设置样式和添加填充等。

<input type="checkbox" id="cbx" name="cbx"><label for="cbx">Different drop off location?</label>
<div class="testerclass"><p>Some text here</p></div>


input[type=checkbox] + label {
    color:#000000;
    font-weight:bold;} 

input[type=checkbox]:checked + label ~ .testerclass {
    display:inline;}

当我在其周围添加段落标记时，它停止工作。我可以看出这是因为复选框不再具有与我要显示的 div 相同的父项，但我不知道如何在 CSS 中执行此操作，因为我需要参考复选框的状态。任何人都可以帮忙吗？谢谢。

<p class="styletoline"><input type="checkbox" id="cbx" name="cbx"><label for="cbx">Different drop off location?</label>
<div class="testerclass"><p>Some text here</p></div></p>

Answer 1

您需要将段落更改为 div。您不能在另一个段落中包含 div 或段落。

因此您可以将其更改为：

<div class="styletoline">
    <input type="checkbox" id="cbx" name="cbx">
    <label for="cbx">Different drop off location?</label>
    <div class="testerclass">
        <p>Some text here</p>
    </div>
</div>

您现在可以像更改其他样式一样更改您的风格线cssclass

.styletoline { 
  padding: 10px;
}

使用 CSS、复选框和选择器来控制表单域的可见性

Using CSS, checkbox and selectors to control visibility of form field

html

css

css-selectors