CSS3仿IOS滑动开关按钮 CSS3仿IOS滑动开关按钮

html

飞行模式

静音

css

.ios {
margin: 0;
【CSS3仿IOS滑动开关按钮】 padding: 0;
}
.ios li {
clear: both;
line-height: 44px;
border-bottom: 1px solid #CCC;
list-style: none;
}
.ios input {
display: none;
}
.ios label {
width: 52px;
background: #CCC;
height: 28px;
border-radius: 14px;
float: right;
margin: 8px 10px 0 0;
box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
}
.ios label em {
width: 26px;
height: 26px;
float: left;
margin: 1px;
border-radius: 13px;
box-shadow: 2px 3px 8px rgba(0,0,0,.1);
background: #FFF;
transition: 0.1s;
}
.ios input:checked + label {
background: #2bb353;
}
.ios input:checked + label em {
margin: 1px 1px 1px 25px;
}
.ios input:disabled + label {
opacity: 0.5
}

效果

文章图片

CSS3仿IOS滑动开关按钮

推荐阅读

丑小鸭的故事告诉我们什么道理？丑小鸭的故事简短版

为什么眼药水的有效期是24个月,药店老板却说只能用一个月？

mysql 事务sql mysql数据库中的事件

新冠疫苗加强针是指第三针吗

wifi5和wifi6网速差别详细介绍

Go 专栏｜接口 interface

英孚英语每日e课英孚英语

分手后有哪些治愈你的歌？

《都挺好》感悟

这里的爱心妈咪小屋，邀您有空来坐坐！有空来坐坐

犯了非法低价出让国有土地使用权应当怎样处罚

南昌公积金贷款额度计算公式

连云港2023秦山岛公开水域游泳邀请赛比赛项目+年龄分组

微信如何视频会议微信怎样视频会议

索尼n3ap属什么级别（索尼n3ap级别是多少）

饿了么APP账号忘记怎么办？详细解决方法

我来教你迅雷极速版怎么设置下载完成后关机迅雷极速版设置下载完自动关机教程

乳腺疾病需要做哪些检查乳腺有哪些检查

正宗烤鱼的制作方法怎么做烤鱼

摄影大赛介绍语摄影大赛介绍