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

Bootstrap复选框，单选框美化特效

所属分类：输入-选择框

 125293  373  查看评论 (20)
分享到微信朋友圈
X
Bootstrap复选框，单选框美化特效 ie兼容9
 查看演示  立即下载

使用方法

引入css

<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/build.css">
js
<script type="text/javascript">
    function changeState(el) {
        if (el.readOnly) el.checked=el.readOnly=false;
        else if (!el.checked) el.readOnly=el.indeterminate=true;
    }
</script>

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

jQuery自定义下拉框美化

 自定义下拉框美化（可以自定义样式）
  选择框
 45548  347

jQuery省市联动、下拉框表单美化

 jQuery个人信息表单，联动、下拉框表单美化
  选择框
 40996  403

jq模拟下拉省市区三级联动插件

 jq模拟下拉的省市区三级联动插件，完美兼容在ie下显示select的不友好ui，数据完整可直接使用
  选择框
 61362  444

jQuery联动下拉菜单

 一款简单实用的联动下拉菜单，第一的条件未选择的情况下无法选择第二个，以此类推
  选择框
 42204  347

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

    用户5566251159 0
    2019/10/31 15:24:26
    为什么 √变成了 口？
        西瓜0
        2019/10/31 16:01:33
        那因该是字符图标样式没有调用好。
    回复
    Eileen 0
    2019/3/21 18:42:41
    为什么我点击input 获取不到 选中的. 回复
    烈日追风 0
    2018/12/24 15:57:11
    为什么 √变成了 口？
        傻杰。0
        2022/7/11 10:36:07
        这不是坑人吗
    回复
    ?着星星看月亮 0
    2018/9/22 17:29:10
    移动端多选框会出现未选中的状态,谷歌浏览器模拟手机没有问题
        ?着星星看月亮0
        2018/9/22 17:42:08
        换了种颜色,然后问题消失了,很奇怪
    回复
    ??泻弦豢 0
    2018/8/31 20:58:06

    我发现了一个bug，就是这样的代码片段如果把第一个单选按钮的checked去掉，所有单选按钮都会变成选中状态，且勾变成了一条横线，难道只有我看出来吗？代码如下：

    <div class="checkbox checkbox">
    <input type="radio" name="radio4" id="radio7" value="option1" checked>
    <label for="radio7">
        Default
    </label>
</div>
<div class="checkbox checkbox-success">
    <input type="radio" name="radio4" id="radio8" value="option2">
    <label for="radio8">
        Success
    </label>
</div>
<div class="checkbox checkbox-danger">
    <input type="radio" name="radio4" id="radio9" value="option3">
    <label for="radio9">
         Danger
    </label>
</div>
        ??泻弦豢1
        2018/8/31 21:08:35

        楼主在build.css中多写了一段代码，把这段代码去掉就能正常显示了，不能上传照片那就代码吧，希望对各位码农有所帮助。

        .checkbox-info input[type="checkbox"]:indeterminate + label::after,.checkbox-info input[type="radio"]:indeterminate + label::after {
	background-color:#fff;
}
    回复
    vn 0
    2018/8/15 13:48:45
    <head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/build.css">
</head>

<body>
    <input type="radio" class="radio-primary" name="a1" onclick="changeState(this)" />11
    <input type="radio" class="radio-primary" name="a1" onclick="changeState(this)" />12
    <script type="text/javascript">
        function changeState(el) {
            if (el.readOnly) el.checked = el.readOnly = false;
            else if (!el.checked) el.readOnly = el.indeterminate = true;
        }
    </script>
</body>

    我想问下为什么没效果？

    回复
    yuanweidong 0
    2018/6/22 9:33:22
    你好，我想问下作者点击后为啥会出现个小的阴影，这个能解决吗？ 回复
    ※镜子明★ 0
    2017/11/21 15:37:05
    雨田君 0
    2017/11/21 9:47:44

    作者，一个页面不能应用多个吗？？为什么失灵了。。

        blue0
        2018/6/21 15:15:03
        id具有唯一性，换成不同的id
    回复
    北港初晴、 0
    2017/9/12 20:26:52

    我用了一下 他有两个勾？

        Lilium。0
        2017/11/17 9:38:58

        。。。。。。。。你是一点网页都没学吧？去掉checked不就行了

    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复