当前位置：首页 > 网页特效 > 选择框

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

分类：选择框日期：2024-05-14 点击(0) 评论(0)

简介

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

```html
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/icheck-bootstrap.css">
```
#####  HTML结构
复选框checkbox的示例代码如下：

```html
<div class="icheck-primary">
    <input type="checkbox" id="someCheckboxId" />
    <label for="someCheckboxId">Click to check</label>
</div>
```
单选框radio的示例代码如下：

```html
<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>
```
内联样式：
```html

<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标签：

```html
<div class="icheck-primary">
    <input type="checkbox" id="someCheckboxId" />
    <label for="someCheckboxId"></label>
</div>           
```       
##### 颜色主题 
Bootstrap主题：

- .icheck-default
- .icheck-primary
- .icheck-success
- .icheck-info
- .icheck-warning
- .icheck-danger
扁平风格主题：

- .icheck-turquoise
- .icheck-emerland
- .icheck-peterriver
- .icheck-amethyst
- .icheck-wetasphalt
- .icheck-greensea
- .icheck-nephritis
- .icheck-belizehole
- .icheck-wisteria
- .icheck-midnightblue
- .icheck-sunflower
- .icheck-carrot
- .icheck-alizarin
- .icheck-clouds
- .icheck-concrete
- .icheck-orange
- .icheck-pumpkin
- .icheck-pomegranate
- .icheck-silver
- .icheck-asbestos

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果