gpt4 book ai didi

html - 带有突出显示复选框的 CSS 选择器问题

转载 作者:搜寻专家 更新时间:2023-10-31 08:15:21 25 4
gpt4 key购买 nike

当我将标签放在复选框之后时,此 CSS 选择器起作用。

    input[type=checkbox]:checked + label {
color: red;
}

<input type="checkbox"><label>Checkbox1</label>

但我也想让复选框在单击标签时也被选中。

enter image description here

这是更新后的 HTML 的 CSS。

        label > input[type=checkbox]:checked {
color: red;
}

<label><input type="checkbox">Checkbox1</label>

我在这里做错了什么?

这是一个文件中的简化 HTML 和样式。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Selectors Test Ground</title>

<style>
label > input[type=checkbox]:checked {
color: red;
}
</style>
</head>
<body>
<form id="checkBoxForm">
<ul>
<li>
<label><input type="checkbox">Checkbox1</label>
</li>
<li>
<label><input type="checkbox">Checkbox2</label>
</li>
<li>
<label><input type="checkbox">Checkbox3</label>
</li>
</ul>
</form>
</body>

最佳答案

您必须使用“for”属性来设置单击标签时选中的复选框,它不是选择器,它是 HTML 属性并指向一个 id,请参见下面的示例:(我只修改了第一个)。

已编辑:在片段中添加了 css(并删除了从问题中复制的样式标签和内容)

input[type=checkbox]:checked + label {
color: red;
}
    <form id="checkBoxForm">
<ul>
<li>
<input id="chk1" type="checkbox"><label for="chk1">Checkbox1</label>
</li>
<li>
<label><input type="checkbox">Checkbox2</label>
</li>
<li>
<label><input type="checkbox">Checkbox3</label>
</li>
</ul>
</form>

并且您不能将输入设置到标签中。

关于html - 带有突出显示复选框的 CSS 选择器问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39691612/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com