html - 带有CSS的复选框波纹效果
问题描述
我正在尝试为复选框实现波纹效果,但它没有准确显示,波纹效果宽度变得太大,下面是我尝试过的代码。我需要一个带有浅色背景的小宽度波纹效果,我想我错过了一些样式。有人可以帮我解决这个问题吗,在此先感谢
.checkbox label {
display: inline-block;
vertical-align: middle;
position: relative;
padding-left: 5px;
}
.checkbox label::before {
content: "";
display: inline-block;
position: absolute;
width: 18px;
height: 18px;
left: 2px;
top: 0px;
margin-left: -20px;
border: 1px solid #ccc;
border-radius: 2px;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.checkbox label::after {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: 1px;
top: 1px;
font-weight: 100;
margin-left: -18px;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: #555;
}
.cbox-table label::after,
.cbox-table label::before {
margin-left: 0px;
}
.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
opacity: 0;
z-index: 1;
cursor: pointer;
}
.checkbox input[type="checkbox"]:indeterminate + label::after,
.checkbox input[type="radio"]:indeterminate + label::after {
display: block;
content: "";
width: 10px;
height: 3px;
background-color: #555;
border-radius: 2px;
margin-left: -16.5px;
margin-top: 7px;
}
.checkbox input[type="checkbox"]:disabled + label,
.checkbox input[type="radio"]:disabled + label {
opacity: 0.65;
}
.checkbox input[type="checkbox"]:disabled + label::before,
.checkbox input[type="radio"]:disabled + label::before {
background-color: #eee;
cursor: not-allowed;
}
.checkbox.checkbox-circle label::before {
border-radius: 50%;
}
.checkbox.checkbox-inline {
margin-top: 0;
}
.checkbox-warning input[type="checkbox"]:checked + label::before,
.checkbox-warning input[type="radio"]:checked + label::before {
background-color: #007bff;
border-color: #007bff;
}
.checkbox-warning input[type="checkbox"]:checked + label::after,
.checkbox-warning input[type="radio"]:checked + label::after {
color: #fff;
}
.checkbox-warning input[type="checkbox"]:indeterminate + label::before,
.checkbox-warning input[type="radio"]:indeterminate + label::before {
background-color: #007bff;
border-color: #007bff;
}
.checkbox-warning input[type="checkbox"]:indeterminate + label::after,
.checkbox-warning input[type="radio"]:indeterminate + label::after {
background-color: #fff;
}
.checkbox input[type="checkbox"]:checked + label::after {
font-family: "FontAwesome";
content: "\f00c";
}
input[type="checkbox"]:focus+label::before {
animation: ripple 1s ease-out;
}
@keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1;
}
20% {
transform: scale(25, 25);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(40, 40);
}
}
<div class="form-check form-check-inline checkbox checkbox-warning checkbox-inline pl-0 text-left">
<input class="form-check-input" type="checkbox" id="check1" name="enquiry" >
<label class="form-check-label label-font" for="inlineCheckbox1">Approved Leaves</label>
</div>
解决方案
我显示代码。我在结构上发现了一些错误,请参见下面的代码。
比较标签和输入的id
HTML 代码:
<div class="form-check form-check-inline checkbox checkbox-warning checkbox-inline pl-0 text-left">
<input class="form-check-input" type="checkbox" id="check1" name="enquiry" >
<label class="form-check-label label-font" for="check1">Approved Leaves</label>
</div>
CSS 代码:
.checkbox label::after {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: 1px;
top: 4px;
font-weight: 100;
margin-left: -18px;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: #555;
}
input[type="checkbox"]:focus+label::after {
animation: ripple 1s ease-out;
}
@keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 0;
}
20% {
transform: scale(0.5, 0.5);
opacity: 0.5;
}
100% {
opacity: 1;
transform: scale(1, 1);
}
}
推荐阅读
- node.js - nodeJs, Express 得到响应并调用另一个函数
- reactjs - 上下文和反应,最佳实践
- android - Ionic 3 - 在 android 上为选定的组件使用 iOS 样式
- sql - 如何检查所有当前行的列是否为空或空白('')?
- excel - 在 VBA 中将“dddd”与“long date”结合会产生奇怪的结果
- android - 在模拟器 GenyMotion 上加载反应本机问题
- java - 如何跳过 xml 标签内的文本验证?
- jquery - 如何在 jquery 模板中隐藏一列
- wpf - 单击任务栏中的任何窗口时,Wpf会打开所有窗口
- mongodb - 限制 Mongoose 在字段后返回数据