纯CSS Bootstrap单选框和复选框美化特效

纯CSS Bootstrap单选框和复选框美化特效

icheck-bootstrap是一款纯CSS Bootstrap单选框和复选框美化特效插件。通过该插件,你可以对原生的bootstrap单选框和复选框进行美化,应用不同的主题样式,甚至可以制作扁平风格的单选框和复选框。

使用方法
在页面中引入bootstrap.min.css和icheck-bootstrap.css文件。

1
2
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/icheck-bootstrap.css">

HTML结构
复选框checkbox的示例代码如下:

1
2
3
4
<div class="icheck-primary">
    <input type="checkbox" id="someCheckboxId" />
    <label for="someCheckboxId">Click to check</label>
</div>

单选框radio的示例代码如下:

1
2
3
4
5
6
7
8
<div class="icheck-primary">
    <input type="radio" id="someRadioId1" name="someGroupName" />
    <label for="someRadioId1">Option 1</label>
</div>
<div class="icheck-primary">
    <input type="radio" id="someRadioId2" name="someGroupName" />
    <label for="someRadioId2">Option 2</label>
</div>

内联样式:

1
2
3
4
5
6
7
8
<div class="icheck-primary icheck-inline">
    <input type="checkbox" id="chb1" />
    <label for="chb1">Label 1</label>
</div>
<div class="icheck-primary icheck-inline">
    <input type="checkbox" id="chb2" />
    <label for="chb2">Label 2</label>
</div>

禁用状态:
在复选框或单选框上添加disabled属性,就可以将它设置为禁用状态。
无label标签:

1
2
3
4
<div class="icheck-primary">
    <input type="checkbox" id="someCheckboxId" />
    <label for="someCheckboxId"></label>
</div>

文件信息:

    0

    发表评论