css - 自定义复选框未转换
问题描述
所以我得到了这个 CSS 自定义复选框,但转换似乎不起作用。我没有编写代码,我是从这里得到的。
这是我稍作修改的版本:
.checkbox {
position: absolute;
opacity: 0;
}
.checkbox + label {
position: relative;
cursor: pointer;
padding: 0;
}
.checkbox + label:before {
content: '';
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
width: 20px;
height: 20px;
background: #ccf2ff;
border-radius: 6px;
box-shadow: 0 0 0 3px #99e6ff;
}
.checkbox:hover + label:before {
background: #80dfff;
}
.checkbox:focus + label:before {
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.checkbox:checked + label:before {
background: #33ccff;
}
.checkbox:disabled + label {
cursor: auto;
}
.checkbox:disabled + label:before {
box-shadow: none;
background: #ddd;
}
.checkbox:checked + label:after {
content: '';
position: absolute;
left: 5px;
top: 9px;
background: white;
width: 2px;
height: 2px;
box-shadow:
2px 0 0 white,
4px 0 0 white,
4px -2px 0 white,
4px -4px 0 white,
4px -6px 0 white,
4px -8px 0 white;
transform: rotate(45deg);
}
.checkbox, .button, input, select
{
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
}
其他所有转换都可以正常工作,这只是问题所在的复选框。我在这里错过了什么吗?还是导致转换不起作用的代码有问题?请帮我。
解决方案
您正在将自定义复选框样式应用于标签的:before
伪元素,label
因此您只需要将过渡也应用于该标签:
.checkbox,
.button,
input,
select,
.checkbox + label:before
{
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
}
推荐阅读
- android - Bundle 在 Fragment 中为空
- c# - 如何在 ASP.NET 中读取上传的 CSV 文件并跳过第一行?
- python - 使用 pyspark 进行一次热编码的最有效方法
- javascript - 具有共享相同事件侦听器的多个输入的去抖动事件
- c++ - C/C++ CreateFileA 失败
- sql - group by 语句中未过滤的数据 - SQL Server
- sql - Creating a category tree table from an array of categories in PostgreSQL
- c++ - 如何在不使用 -I 选项的情况下链接静态库
- c# - 为 Statsd 引用 nuget 包时找不到 Visual Studio 2019 .cs 文件
- java - 如何初始化自定义迭代器?