css - 如何用周围的白色更改复选框背景颜色
问题描述
我正在寻找一种解决方案,如何使用复选框周围的填充或白色来更改 CSS 背景颜色,我尝试使用边距、填充高度等进行游戏,但没有运气。所以当用户点击复选框时,它会显示背景颜色,它正在工作,但我想在复选框周围有白色填充,这可能吗?
.checkbox {
margin: 0 0 1em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {
display: inline;
}
.checkbox .input-assumpte {
display: none;
}
.input-assumpte + label:after {
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
display: inline-block;
transition-duration: 0.3s;
width: 16px;
height: 16px;
content: "";
margin-left: 10px;
padding: 5px;
}
.input-assumpte:checked + label:after {
background-color: #0e4caa;
padding: 5px;
}
<div class="checkbox">
<input type="checkbox" class="input-assumpte" id="input-confidencial" />
<label for="input-confidencial">Confidencial</label>
</div>
解决方案
您可以使用 CSSbox-shadow
属性:
.checkbox {
margin: 0 0 1em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {
display: inline;
}
.checkbox .input-assumpte {
display: none;
}
.input-assumpte+label:after {
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
display: inline-block;
transition-duration: 0.3s;
width: 16px;
height: 16px;
content: "";
margin-left: 10px;
padding: 5px;
}
.input-assumpte:checked+label:after {
background-color: #0e4caa;
padding: 5px;
box-shadow: inset 0px 0px 0px 4px white
}
<div class="checkbox">
<input type="checkbox" class="input-assumpte" id="input-confidencial" />
<label for="input-confidencial">Confidencial</label>
</div>
推荐阅读
- eclipse - 是否可以找出用 Eclipse 编辑器编写的代码是否有效并相应地禁用/启用上下文菜单按钮?
- android - Firebase Auth 在 android stuio 中使应用程序崩溃
- ios - 我可以对具有不同捆绑 ID 的两个 iOS 应用使用相同的 Firebase GoogleService-Info.plist 吗?
- python - 如何使用 tensorflow 加速频谱图计算?
- solr - 如何使用 Solr 复制字段
- mysql - 数据库触发器如何将值的总和从一个表插入到另一个表?
- reactjs - Redux 状态的变化未反映在组件中
- c++ - 为什么你应该使用 unsigned int 而不是 unsigned?
- java - JDK11代码结构——java.exe和jli.dll源码在哪里?
- linux - 带有变量的 Bash 中的 If 语句