UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

纯CSS仿iOS 开关(原创)

所属分类：输入-选择框

 23587  309  查看评论 (8)
分享到微信朋友圈
X
纯CSS仿iOS 开关(原创) ie兼容9
 查看演示  立即下载

设计思路：

1. 把input隐藏

2. 美化label,

3. label 包一个圆形开关

4. input状态为checked 改变label 的背景并改变圆形开关的位置

5. 最重要的 input: checked + label， 选择邻近的标签， 改变样式

6. 懂得以上原理， 美化其他checkbox和radio 还有难度吗？

相关插件-选择框
查看更多

jQuery下拉框美化插件

 表单的一些元素是很难或不能设置样式的，所以有些时候它们的默认样式可能会与你的设计格格不入，这时候也许美化插件是个不错的选择。
  选择框
 37068  378

移动端弹出列表选择框

 html5制作动画弹出下拉菜单选择，适用于手机端的动态弹出选择下拉菜单代码。
  选择框
 45065  352

jQuery移动端 城市四级联动

 jQuery移动端城市四级联动,之前有一版是三级联动，这个增加了一级。
  选择框
 35611  378

模糊查询的下拉框

 下拉框的样子，上面可以输入带有查询功能
  选择框
 61601  465

讨论这个项目（8）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    关超笛 0
    2020/5/21 16:48:40
    我想说，iE8不兼容
        Thinkbird0
        2020/5/23 17:26:53
        支持CSS 3的浏览器才行
    回复
    孤雨 0
    2020/3/22 21:22:09
    那，怎么获取原来的input checked值啊
        Thinkbird0
        2020/3/23 10:07:02
        系统自动的啊
    回复
    lulu长颈鹿_44761 0
    2019/9/18 14:40:31
    解决了我的问题，感谢 回复
    jqueryDemo256 0
    2019/5/31 17:06:05
    Lucky8Guy 0
    2018/12/20 22:04:11
    学习了
    for与id绑定
    点击for相当于点击复选框对不？
        Thinkbird0
        2019/5/31 17:16:38
        是的，然后改变label 的背景，和圆的位置
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复