html - CSS 自定义复选框
问题描述
我有一个页面,上面有 30 个复选框。那些是用于座位预订的。现在我试着给它们设计样式。
.seatlayout{
border: 1px solid;
display: table;
width: 30%;
padding: 6% 2% 0% 2%;
border-radius: 5%;
}
.seat{
position: relative;
width: 22%;
margin-bottom: 10%;
float: left;
text-align: center;
border: 1px solid #ccc;
}
[class*='seatcont'],
.seatdis{
position: relative;
width: 100%;
height: 100%;
}
[class^="seatcon"] label,
.seatdis label{
background-color: #f1f2ed;
cursor: pointer;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
[class^="seatcon"] input[type="checkbox"] ,
.seatdis input[type="checkbox"] {
z-index:10
}
[class^="seatcon"] input[type="checkbox"]:checked + label
{
background-color: #66bb6a;
}
.seatdis input[type="checkbox"]:checked + label{
background-color: grey;
pointer-events: none
}
[class^="seatcon"] input[type="checkbox"]:checked +
label:after {
opacity: 1;
}
<div class="seatlayout">
<div class="seat">
<div class="seatcont1">
<input type="checkbox id="checkbox">
<label for="checkbox" id="lab1">
</div>
</div>
<div class="seat">
<div class="seatcont2">
<input type="checkbox id="checkbox">
<label for="checkbox" id="lab2">
</div>
</div>
<div class="seat">
<div class="seatcont3">
<input type="checkbox id="checkbox">
<label for="checkbox" id="lab3">
</div>
</div>
</div>
问题 无论我点击哪个座位,它总是检查第一个座位。在使用通配符时,我尝试了几种添加唯一类和 id 的方法。任何帮助将不胜感激!
解决方案
您已在所有复选框上放置了相同的 id。你需要给他们一个不同的ID。此外,您在类型之后的所有复选框上都缺少结束引号。
<input type="checkbox" id="checkbox">
<label for="checkbox" id="lab1">
....
<input type="checkbox" id="checkbox2">
<label for="checkbox2" id="lab1">
推荐阅读
- php - 来自 PHP 的 ID 未传递到 URL
- pentaho - 如果输入重新编码为 0,则 HTTP Post 给出错误
- c# - 每次按下按钮时如何停止面板加载
- laravel - 配额组“WriteGroup”Google Sheet Api 错误超出配额
- php - 覆盖枢轴模型上的铸造类型
- gradle - 如何从 Gradle 中的 Kotlin 获取 Groovy DSL 提供的值
- kubernetes - 如何查看已终止 pod 的日志
- ios - 如何将 iOS 版本存档到 App Store?
- django - 如何在视图中获取嵌套关系
- java - JAX-RS 2.1 参数类型 Object.class