以下是一个用纯css完成的iOS按钮,没有点击之前是灰色,点击之后是绿色。
没有用任何js。
利用伪类选择器来完成点击效果,布局因为不难,就不一一赘述。
注意父元素label下的input元素用visibility即可,如果换成display:none会全部隐藏;
visibility用来确定元素是显示还是隐藏,用visibility="visible|hidden"来表示,visible表示显示,hidden表示隐藏。当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
label{
transform: scale(2);
width: 100px;
height: 50px;
border: 1px solid #ddd;
background: #ddd;
border-radius: 25px;
position: relative;
overflow: hidden;
}
label input{
visibility: hidden;
}
label input::after{
visibility: visible;
content: '';
width: 40px;
height: 40px;
position: absolute;
background: #fff;
border-radius: 50%;
left: 5px;
top: 5px;
transition: all 0.2s;
}
label input:checked::after{
transform: translateX(50px);
}
label input::before{
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: all 0.2s;
visibility: visible;
}
label input:checked::before{
background: rgb(68, 175, 90);
}
</style>
</head>
<body>
<label for="input">
<input type="checkbox" class="checkbox">
</label>
</body>
</html>
以下为最终显示效果