可以创建一个带有可点击标签的复选框。
这意味着单击标签时复选框会打开/关闭。
在此代码中，我们建议使用两种方法来创建带有可点击标签的复选框。
这可以通过包装 <label> 标签或者使用“for”属性来实现。
首先，我们来看看如何使用软件包<label>标签的方法。
创建 HTML
- 使用带有名为“label”的类的 <label> 标签。
- 在 <label> 标记中添加具有类型、名称和值属性的 <input> 元素。
<label class="label"> <input type="checkbox" name="checkbox" value="text"> Text </label>
现在，使用 CSS 设置标签样式。
添加 CSS
- 使用背景颜色、边框和颜色属性。
- 添加填充和边距。
- 将 text-align 设置为“center”，将 display 设置为“inline-block”。
- 指定字体大小和光标属性。
.label {
background-color: #fff;
border: 1px solid #666;
color: #000;
padding: 10px 15px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 15px 15px;
cursor: pointer;
}
让我们看看最终的代码。
通过包装 <label> 标签创建带有可点击标签的复选框的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.label {
background-color: #fff;
border: 1px solid #666;
color: #000;
padding: 10px 15px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 15px;
cursor: pointer;
}
</style>
</head>
<body>
<label class="label">
<input type="checkbox" name="checkbox" value="text">Text
</label>
</body>
</html>
一个标签不能有多个输入，它可以省略 for 属性，并且应该用于其中的输入。
for 属性必须与 id 属性的值匹配。
当不存在时，标签与元素的内容相关联。
另外，请注意 id 在页面上应该是唯一的。
使用 for 属性创建带有可点击标签的复选框的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.text {
background-color: #fff;
border: 1px solid #666;
color: #000;
padding: 10px 15px;
text-align: center;
display: inline-block;
font-size: 15px;
margin: 15px;
cursor: pointer;
}
</style>
</head>
<body>
<input type="checkbox" name="checkbox" id="checkID" value="text">
<label class="text" for="checkID">Text </label>
</body>
</html>
我们上面演示的第一种方法比使用 for 属性有一些优势。
更好，因为不需要为每个复选框分配 id 或者在 <label> 中使用添加属性。
还有一个好处是标签的可点击区域也是标签的可点击区域。
日期：2020-06-02 22:15:06 来源：oir作者：oir