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

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

所属分类：输入-选择框

 126268  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>

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

vue 城市下拉模拟组件Citypicker

 基于vue开发的城市模拟下拉组件
  选择框
 43622  384

jQuery首字母搜索全国省市区插件

 一款简单实用的响应式首字母搜索全国省市区插件适合手机页面和网站页面
  选择框
 23946  297

移动端城市选择

 手机移动端城市选择
  选择框
 57789  495

div模拟下拉省市级联三级联动附带地区数据(原创)

 带地区代码，兼容到ie8；浏览器样式统一，下拉图标可自行更换，根据隐藏input value值获取地区代码
  选择框
 29779  327

讨论这个项目（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不就行了

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