## 带ON/OFF文字
![](https://img.kancloud.cn/fe/d0/fed0c46f6f03bcd4b90a14253feb8011_244x42.png)
### 1、
```
<input class="real-switch real-onoff" type="checkbox">
```
### 2、
```
<input class="real-switch real-onoff" type="checkbox" checked="checked">
```
## 普通样式
![](https://img.kancloud.cn/61/3d/613df814870c777ca09de8ed2784a60a_234x40.png)
### 1、
```
<input class="real-switch" type="checkbox">
```
### 2、
```
<input class="real-switch" type="checkbox" checked="checked">
```
## 自定义文字描述
![](https://img.kancloud.cn/a3/37/a337c815bda3be74be292652d48ca705_287x42.png)
### 1、
```
<span class="real-switch-tip"><label><input type="checkbox"><em></em><span>是否发射核弹</span><span>发射!!</span> </label> </span>
```
### 2、
```
<span class="real-switch-tip"><label><input type="checkbox" checked="checked"><em></em><span>是否发射核弹</span><span>发射!!</span> </label> </span>
```
## 其他颜色
![](https://img.kancloud.cn/f9/00/f9001d684d0055f0c3de795f545d1622_946x48.png)
~~~
<input class="real-switch real-blue" type="checkbox" checked="checked">
<input class="real-switch real-red" type="checkbox" checked="checked">
<input class="real-switch real-yellow" type="checkbox" checked="checked">
<input class="real-switch real-green" type="checkbox" checked="checked">
<input class="real-switch real-black" type="checkbox" checked="checked">
<input class="real-switch real-onoff real-blue" type="checkbox" checked="checked">
<input class="real-switch real-onoff real-red" type="checkbox" checked="checked">
<input class="real-switch real-onoff real-yellow" type="checkbox" checked="checked">
<input class="real-switch real-onoff real-green" type="checkbox" checked="checked">
<input class="real-switch real-onoff real-black" type="checkbox" checked="checked">
<span class="real-switch-tip real-blue"><label><input type="checkbox" checked="checked"><em></em><span>是否发射核弹</span><span>发射!!</span> </label> </span>
<span class="real-switch-tip real-red"><label><input type="checkbox" checked="checked"><em></em><span>是否发射核弹</span><span>发射!!</span> </label> </span>
<span class="real-switch-tip real-yellow"><label><input type="checkbox" checked="checked"><em></em><span>是否发射核弹</span><span>发射!!</span> </label> </span>
<span class="real-switch-tip real-green"><label><input type="checkbox" checked="checked"><em></em><span>是否发射核弹</span><span>发射!!</span> </label> </span>
<span class="real-switch-tip real-black"><label><input type="checkbox" checked="checked"><em></em><span>是否发射核弹</span><span>发射!!</span> </label> </span>
~~~