Question

仅使用CSS，是否可以根据输入的状态设置HTML标签的样式？

在我的情况下，我想根据是否检查来设置<input type="checkbox">的样式。

我尝试将标签放在输入中，但Firefox和Chrome（至少）似乎将它们解析为兄弟姐妹，即使它们明显嵌套在输入源中。而且我不知道如何编写一个可以间接通过for = attribute的CSS规则。

我是否需要在这个问题上使用Javascript？

Answer 1

它们不需要嵌套，这就是＆lt; label＆gt;中“for”属性的用途。元件。

在现代浏览器（支持CSS 2.1的浏览器）中，您可以使用兄弟选择器，例如

input + label {
  /* rules */
}

您必须将您的标记置于严格的兄弟关系中，例如：

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

Answer 2

使用相邻/兄弟选择器加上属性选择器可以使它工作：

<form>
    <style>
    INPUT[checked=checked] + LABEL {
        color: #f00;    
    }
    </style>
    <div>
        <input type="checkbox" id="chk1" />
        <label for="chk1">Label #1</label>
    </div>
    <div>
        <input type="checkbox" id="chk2" checked="checked" />
        <label for="chk2">Label #2</label>
    </div>
</form>

Answer 3

要使此功能正常运行，您需要将label放在input后面，这适用于文本类型输入，因此for checkbox you can skip this除非您希望在复选框前加上标签。 >

要使label的顺序保持在input之前，您需要使用Flexbox和相反的项目顺序，例如这样。

.form-group {
  display: flex;
  flex-direction: column-reverse;
}

带有display: flex;的{{1}}对divs内容重新排序。

现在您所要做的就是使用它来影响您的flex-direction: column-reverse;风格。

label

和HTML的完整性。

input:checked + label {
  color: #000;
}

根据<input />的状态</label>设置<label>的样式

3 个答案: