html - 如何仅使用 HTML 和 CSS 使元素的背景切换复选框?
问题描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="checkbox"/>
<div style="width: 100px; height: 100px; background-color: red;"></div>
</body>
</html>
例如。我想单击红色框并使复选框切换。
解决方案
您可以围绕div
包含背景颜色的label
指向要切换的复选框。标签的for
属性将包含id
复选框的。
.myDiv {
width: 100px;
height: 100px;
background-color: red;
margin-top: 1em;
cursor: pointer;
}
<label for="myCheckbox">
<div class="myDiv"></div>
</label>
<input id="myCheckbox" type="checkbox" />
推荐阅读
- javascript - ModPE 将 GUI 菜单的背景设置为图像
- jsonata - 如何使用 jsonata 返回多个对象,分配第一个键/值,始终为 dateTime,其余键变化
- python - 使用python的罗马数字转换器
- javascript - JavaScript 函数接收两个字符串并返回 n
- html - 在网页内显示 pdf。文档 url 是一个变量
- javascript - 如何使用 JavaScript 过滤器过滤元素搜索?
- android - 我可以使用 google play 商店为我的应用检索一些新闻数据吗?
- regex - 如何在字符串中的每个字符后添加“^”
- ruby-on-rails - Heroku 上的 Rails 6:ActiveRecord::AdapterNotSpecified:数据库配置未指定适配器
- python - 使用 Pandas 根据可能部分重叠的范围组合两个数据框并跟踪多个值