Question

我有一个标准的HTML复选框，我想要应用错误状态 - 我知道你不能直接将样式应用于复选框，所以我试图将样式应用到它的父div。

考虑：

<div class="form-row">
    <input type="checkbox" name="checkbox" class="required">
</div>

<div class="form-row">
    <input type="text" name="text" class="text-input required">
</div>

目前，我可以使用以下内容设置文本输入错误的样式：

.text-input .error {
    background-color:red;
}

但是这对复选框不起作用 - 我尝试使用jQuery来获取复选框父级，并且仅在复选框的错误上设置父级样式（即对于textinput只使用上面的内容）：

$("form-row:has(input[type='checkbox'] error)").css("background-color", "red");

这没有任何作用 - 我没有收到任何错误，但父母没有任何反应。仅当子复选框具有错误类时，如何设置父div的样式？

Answer 1

据我所知，因为你的div缠绕在你的<input>上，所以背景不可见。尝试在div中添加填充。或输入的保证金。如你所愿。

.form-row {
padding: 5px;
}

Answer 2

我认为你错过了jQuery代码error之前的一段时间。你错过了form-row之前的一段时间;）。它应该是：

$(".form-row:has(input[type='checkbox'].error)").css("background-color", "red");

没有句点（input[type='checkbox'] error），它表示您正在输入复选框类型中查找其中包含错误元素 （以及{ {1}}是empty elements，其中没有任何内容可能存在。）

将错误状态应用于复选框父div

2 个答案: