开关样式.css

最新推荐文章于 2024-05-18 10:01:50 发布

ououyangxiaolin

最新推荐文章于 2024-05-18 10:01:50 发布

阅读量157

点赞数

本文链接：https://blog.csdn.net/ououyangxiaolin/article/details/103016259

版权

input[type=checkbox].switch{
outline: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
position: relative;
width: 2.8rem;
height: 1.48rem;
border: 1px solid #ccc;
background-color: #ccc;
border-radius: 0.7rem;
}
input[type=checkbox].switch::after{
content: “”;
display: inline-block;
width: 1.4rem;
height: 1.4rem;
border-radius: 50%;
background-color: #ffffff;
box-shadow: 0 0 2px #999;
transition: left 0.1s;
position: absolute;
top: 0px;
left: 0;
}
input[type=checkbox].switch:checked{
background-color:yellowgreen;
}
/* 默认不被选中状态*/
/*input[type=checkbox]被选中时伪元素显示下面样式 /
input[type=checkbox].switch:checked::after{
position: absolute;
top: 0px;
left: 1.4rem;
}
/ 状态 */
input[type=checkbox]:checked.switch.switch-info{
background-color: #409eff;
}
input[type=checkbox].switch.switch-denger{
background-color: red;
}
input[type=checkbox]:checked.switch.switch-primary{
background-color:blue;
}
input[type=checkbox]:checked.switch.switch-warm{
background-color: yellow;
}