纯CSS美化 单复选框(原创)

所属分类:输入-选择框

 30544  416  查看评论 (20)
分享到微信朋友圈
X
纯CSS美化 单复选框(原创) ie兼容9

更新时间:2018/8/31 9:36:53

更新说明:

  1. 未选中状态优化

  2. 新增不可用状态

  3. 新增选中不可用状态


1. 把input隐藏

2. 美化label,

3. label 包一个圆形开关

4. input状态为checked 改变label 的背景

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

相关插件-选择框

jQuery移动端电影院选座

一个移动端电影院选座demo
  选择框
 27037  367

jQuery仿美团APP筛选

jQuery条件筛选
  选择框
 43380  390

城市选择手机端(原创)

类似手机通讯录,选择城市,去除省份。
  选择框
 40937  418

聚焦input框,显示下拉框(原创!!)

鼠标聚焦input框,之接显示下拉内容,点击输入框以外的地方因关闭下拉框。
  选择框
 31632  313

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

    0
    2021/6/22 17:48:16
    出现label 和选择框分离的情况如何解决
        Thinkbird0
        2021/6/22 17:53:13
        需要邻近,+ 就是邻近选择器
        0
        2021/6/23 17:43:15
        什么意思??我是后台传参数回来再加载复选框 我直接打开的时候有时候会出现label和框分离出去的情况
        Thinkbird1
        2021/6/27 17:07:44
        input 和 label一定要放在一起,+ 就是邻近选择器,不然就不会起作用
        <input/><img/><label>这样就没有作用了,img 才是它的邻近标签
    回复
    天际线 0
    2020/5/8 16:53:37
    大佬!请问怎么获取选中的哪一个呢
        魏朝琴1
        2021/1/14 20:42:30
        $("input[name='category']:checkbox").click(function() { //我给input加了name属性
            let res = '';
            $('.res_name').remove(); //移除之前添加的标签内容,只留最后一次循环的
            $("input[name='category']:checkbox").each(function() {
                if ($(this).prop('checked')) {
                    res += $(this).next().text() + ","; //获取点击的文本内容以“,”分隔开
                }
            });
            $("<input type='hidden' class='res_name'  name='category_name'/>").val(res).appendTo('#myform'); //#myform是我form表单的id
        })
        //后台通过name=category_name的input获取值。这就是用户选择的值
    回复
    古城深巷旧少年 0
    2019/9/25 11:01:51

    为什么我添加了 name属性 就默认不选中了  

    <input type="checkbox" checked value='01' name='filter_media' id="filter_media2" the-id="title_checkbox1">
    <label for="filter_media2">新闻</label>
        Thinkbird0
        2019/9/25 11:04:04
        你下载最原始的代码,拿来改下试试
    回复
    hahaandithe 0
    2018/11/12 15:29:32
    正式想要的效果,先感谢下你,这去试试我能不能用 回复
    E都市001 0
    2018/10/21 11:10:17
    代维 0
    2018/9/21 17:54:09
    怎么垂直显示啊
    回复
    98 ミ 君忆蓝桥 0
    2018/9/5 10:33:50
    唔昂汪、么一凹喵 0
    2018/9/3 16:21:41
    你好。。请问这种方式怎么获取是选中还是取消
        Thinkbird1
        2018/9/3 21:57:45
        html 怎么写就是怎么样的,不依赖任何js
        checked 就是选中的,disabled 就是禁用的
    回复
    ?眼檩眼 0
    2018/8/31 10:01:50
    兼容性怎么样
        Thinkbird0
        2018/8/31 10:02:36
        兼容CSS3 的IE 9及 以上浏览器即可
        ?眼檩眼0
        2018/8/31 10:04:53
        能兼容到IE9 手机端也能用 低版本ie 没测
        ?眼檩眼0
        2018/8/31 10:05:36
        低版本 安卓 写错了
        Thinkbird0
        2018/8/31 15:05:20
        多个Andorid 设备测试没有问题,你也可以试试
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复