scss 自订复选框
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss 自订复选框相关的知识,希望对你有一定的参考价值。
.checkbox {
display: block;
position: relative;
padding-left: 24px;
margin-bottom: 6px;
cursor: pointer;
}
.checkbox:hover input + .checkbox-mark {
background-color: #f3f3f3;
}
.checkbox input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.checkbox input:checked + .checkbox-mark:after {
display: block;
}
.checkbox .checkbox-mark {
position: absolute;
top: 3px;
left: 0;
height: 12px;
width: 12px;
border: 1px solid #333;
background: #fff;
}
.checkbox .checkbox-mark:after {
content: "";
position: absolute;
display: none;
left: 2px;
top: -2px;
width: 6px;
height: 10px;
border: solid #333;
border-width: 0 3px 3px 0;
transform: rotate(45deg); /* add prefix if need */
}
.checkbox {
display: block;
position: relative;
padding-left: 32px;
margin-bottom: 12px;
cursor: pointer;
&:hover {
input {
& ~ .checkbox-mark {
background-color: #f3f3f3;
}
}
}
input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
&:checked {
& ~ .checkbox-mark {
&:after {
display: block;
}
}
};
}
.checkbox-mark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
border: 1px solid #333;
border-radius: 2px;
&:after {
content: "";
position: absolute;
display: none;
left: 6px;
top: 2px;
width: 7px;
height: 12px;
border: solid #333;
border-width: 0 3px 3px 0;
transform: rotate(45deg); /* add prefix if need */
}
}
}
以上是关于scss 自订复选框的主要内容,如果未能解决你的问题,请参考以下文章
css 自订复选框
css 自订复选框
css 自订复选框
scss 样式复选框
scss 复选框示例
scss 可访问的复选框替换(按钮样式控件)