html - 复选框样式和背景
问题描述
是否可以像这样设置复选框的样式并更改其背景!
试过阴影框和轮廓
我所能达到的最好的方法是使用 :before 方法,但仍然没有关闭
这是我尝试过的
CSS
.table__check-box {
background-color: red;
position: relative;
height: 1.75rem;
width: 1.75rem;
margin-right: 2.3rem;
margin-top: 1rem;
}
.table__check-box--inactive {
background-color: #a4a9ae;
}
.table__check-box:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 5px;
border: 2px solid #ccc;
}
HTML
<input class="table__check-box" type="checkbox">
解决方案
输入元素没有内容,所以应该没有:before
. 更好的使用table__check-box + label:before
:
* {
box-sizing: border-box;
}
.table__check-box {
opacity: .3;// Just for display
// Uncomment:
// display: none;
}
.table__check-box + label {
background-color: red;
display: inline-block;
position: relative;
height: 1.75rem;
width: 1.75rem;
margin-right: 2.3rem;
margin-top: 1rem;
overflow: hidden;
border-radius: 5px;
border: 2px solid #ccc;
}
.table__check-box:not(:checked) + label {
background-color: #a4a9ae;
}
<div class="input-wrapper">
<input id="active-checkbox" class="table__check-box" type="checkbox"/>
<label for="active-checkbox"></label>
</div>
推荐阅读
- javascript - 如何使用 Puppeteer 点击 PDF 页面上的下载按钮?
- sql-server - 如何使用 tSQLt 测试整数值是否在特定范围内?
- r - 将 2 级预测变量变为回归模型的是和否
- java - Redhat 8.4 Java Swing web -- 组件不可见,但确实存在
- python - Django 中 .get_or_create 函数的响应不正确
- c++ - 缺少magick-baseconfig.h
- function - 表达式与函数之间的差异
- c# - 当我在 Asp .net mvc 6.0 上搭建 Identity 时出现引导问题
- angular - 为什么我在 nx monorepo 中用于生产的 NestJS 构建版本不包含数据库?
- python - 无限递归:为什么会出现在这个类方法的实现中