<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--
name="viewport"兼容移动端
initial-scale= 1.0 表示 pc 移动端 = 1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <link rel="stylesheet" href="../dzmQueryUI/dzmQuerySwitch.css"> -->
<style>
/* 必须是input 为 checkbox class 添加 switch 才能实现以下效果 */
input[type="checkbox"].switch {
appearance: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
position: relative;
width: 2.8rem;
height: 1.52rem;
border: 1px solid #ccc;
background-color: #ccc;
border-radius: 0.7rem;
}
.switch::after {
content: "";
display: inline-block;
width: 1.4rem;
height: 1.4rem;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 2px #999;
transition: left 0.2s;
top: 0;
left: 0;
position: absolute;
}
input[type="checkbox"].switch:checked {
background-color: #45b97c;
}
/*
默认不被选中
当input[type="checkbox"] 被选中的时候 伪元素显示下面样式 定位发生变化
*/
input[type="checkbox"].switch:checked::after {
top: 0;
left: 1.42rem;
position: absolute;
}
/* 状态 */
input[type="checkbox"]:checked.switch.switch-info {
background-color: #33a3dc;
}
input[type="checkbox"]:checked.switch.switch-danger {
background-color: rgb(255, 73, 73);
}
input[type="checkbox"]:checked.switch.switch-primary {
background-color: #009ad6;
}
input[type="checkbox"].switch.switch-primary{
background-color: rgb(255, 73, 73);
}
input[type="checkbox"]:checked.switch.switch-warm {
background-color:#f47920;
}
</style>
</head>
<body>
<input type="checkbox" class="switch">
<input type="checkbox" class="switch switch-danger">
<input type="checkbox" class="switch switch-info">
<input type="checkbox" class="switch switch-primary">
<input type="checkbox" class="switch switch-warm">
</body>
</html>
128
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
