创艺 HTML 开关是一个用于 WEB 开发的 HTML 前端组件，它可以让原生复选框和原生单选框变成像 IOS 7 的开关组件那种样子。使用起来非常简单，你可以轻易地更改定制这些代码。
纯 CSS 与 HTML 交互的组件，没有脚本程序的依赖。
需要浏览器具备 HTML5 与 CSS3 的支持。
把下面的 CSS 样式加入到你的代码中，并确保命名的唯一性：
<style>
.DIV_switch_box {
border: 1px solid #e9e9e9;
border-radius: 20px;
display: inline-block;
height: 30px;
position: relative;
width: 50px;
user-select: none;
-webkit-tap-highlight-color: transparent;
box-sizing: content-box;
}
.DIV_switch_box > label:nth-child(2) {
transition: border .4s ease 0s, box-shadow .4s ease 0s, background-color .4s ease 0s;
border-radius: 20px;
cursor: pointer;
display: inline-block;
height: 100%;
width: 100%;
background: #fff;
}
.DIV_switch_box > label:nth-child(3) {
left: 0;
transition: background-color .4s ease 0s, left .2s ease 0s;
background: #fff;
border-radius: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
height: 30px;
position: absolute;
top: 0;
width: 30px;
cursor: pointer;
}
.DIV_switch_box > input {
display: none;
}
.DIV_switch_box > input:checked ~ label:nth-child(2) {
background-color: rgb(100, 189, 99);
box-shadow: rgb(100 189 99) 0px 0px 0px 16px inset;
}
.DIV_switch_box > input:checked ~ label:nth-child(3) {
left: 21px;
}
.DIV_switch_box > input:checked:disabled ~ label:nth-child(2) {
opacity: .5;
}
.DIV_switch_box > input:checked:disabled ~ label:nth-child(3) {
opacity: .9;
}
.DIV_switch_box > input:disabled ~ label:nth-child(2) {
opacity: .5;
cursor: not-allowed;
}
.DIV_switch_box > input:disabled ~ label:nth-child(3) {
opacity: .5;
cursor: not-allowed;
}
.DIV_switch_box.small {
width: 46px;
height: 25px;
}
.DIV_switch_box.small > label:nth-child(3) {
width: 25px;
height: 25px;
}
.DIV_switch_box.small > input:checked ~ label:nth-child(3) {
left: 22px;
}
.DIV_switch_box.tiny {
width: 40px;
height: 20px;
}
.DIV_switch_box.tiny > label:nth-child(3) {
width: 20px;
height: 20px;
}
.DIV_switch_box.tiny > input:checked ~ label:nth-child(3) {
left: 21px;
}
.DIV_switch_box.blue > input:checked ~ label:nth-child(2) {
background-color: rgb(109, 158, 235);
box-shadow: rgb(109, 158, 235) 0px 0px 0px 16px inset;
}
.DIV_switch_box.yellow > input:checked ~ label:nth-child(2) {
background-color: rgb(255, 215, 0);
box-shadow: rgb(255, 215, 0) 0px 0px 0px 16px inset;
}
.DIV_switch_box.red > input:checked ~ label:nth-child(2) {
background-color: rgb(221, 69, 58);
box-shadow: rgb(221, 69, 58) 0px 0px 0px 16px inset;
}
.DIV_switch_box.purple > input:checked ~ label:nth-child(2) {
background-color: rgb(174, 83, 229);
box-shadow: rgb(174, 83, 229) 0px 0px 0px 16px inset;
}
.DIV_switch_box.orange > input:checked ~ label:nth-child(2) {
background-color: rgb(255, 124, 0);
box-shadow: rgb(255, 124, 0) 0px 0px 0px 16px inset;
}
.DIV_switch_box.cyan > input:checked ~ label:nth-child(2) {
background-color: rgb(106, 203, 250);
box-shadow: rgb(106, 203, 250) 0px 0px 0px 16px inset;
}
</style>
复选框的 HTML 标记如下：
<div class="DIV_switch_box">
<input id="checkbox_id" type="checkbox" checked />
<label for="checkbox_id"></label>
<label for="checkbox_id"></label>
</div>
结果：
由一个 div 元素包裹一个原生复选框元素，再加两个 label 元素构成，div 元素的类名要求具有 DIV_switch_box。
如果是单选框，则把复选框改为单选框标记就行，如下：
<div class="DIV_switch_box">
<input id="radio1" name="radio_group" type="radio" checked />
<label for="radio1"></label>
<label for="radio1"></label>
</div>
<div class="DIV_switch_box">
<input id="radio2" name="radio_group" type="radio" />
<label for="radio2"></label>
<label for="radio2"></label>
</div>
<div class="DIV_switch_box">
<input id="radio3" name="radio_group" type="radio" />
<label for="radio3"></label>
<label for="radio3"></label>
</div>
结果：
除了默认的大小外，还有另外两个，分别是 small 和 tiny，只需要在 div 元素的类名中添加该尺寸类名即可：
<div class="DIV_switch_box">
<input id="checkbox_1" type="checkbox" checked />
<label for="checkbox_1"></label>
<label for="checkbox_1"></label>
</div>
<div class="DIV_switch_box small">
<input id="checkbox_2" type="checkbox" checked />
<label for="checkbox_2"></label>
<label for="checkbox_2"></label>
</div>
<div class="DIV_switch_box tiny">
<input id="checkbox_3" type="checkbox" checked />
<label for="checkbox_3"></label>
<label for="checkbox_3"></label>
</div>
结果：
一共预置了 7 种主题色，除了默认的绿色外，还有 blue、yellow、red、purple、orange、cyan；和尺寸大小的用法一样，只需在 div 元素的类名中加入该主题色名：
<div class="DIV_switch_box small">
<input id="checkbox_5" type="checkbox" checked />
<label for="checkbox_5"></label>
<label for="checkbox_5"></label>
</div>
<div class="DIV_switch_box small blue">
<input id="checkbox_6" type="checkbox" checked />
<label for="checkbox_6"></label>
<label for="checkbox_6"></label>
</div>
<div class="DIV_switch_box small yellow">
<input id="checkbox_7" type="checkbox" checked />
<label for="checkbox_7"></label>
<label for="checkbox_7"></label>
</div>
<div class="DIV_switch_box small red">
<input id="checkbox_8" type="checkbox" checked />
<label for="checkbox_8"></label>
<label for="checkbox_8"></label>
</div>
<div class="DIV_switch_box small purple">
<input id="checkbox_9" type="checkbox" checked />
<label for="checkbox_9"></label>
<label for="checkbox_9"></label>
</div>
<div class="DIV_switch_box small orange">
<input id="checkbox_10" type="checkbox" checked />
<label for="checkbox_10"></label>
<label for="checkbox_10"></label>
</div>
<div class="DIV_switch_box small cyan">
<input id="checkbox_11" type="checkbox" checked />
<label for="checkbox_11"></label>
<label for="checkbox_11"></label>
</div>
结果：
如果单选框或复选框设置了 disabled 属性，那么此开关将会有单独的样式，且能够契合主题色变化：
<div class="DIV_switch_box">
<input id="checkbox_12" type="checkbox" disabled />
<label for="checkbox_12"></label>
<label for="checkbox_12"></label>
</div>
<div class="DIV_switch_box">
<input id="checkbox_13" type="checkbox" checked disabled />
<label for="checkbox_13"></label>
<label for="checkbox_13"></label>
</div>
<div class="DIV_switch_box blue">
<input id="checkbox_14" type="checkbox" checked disabled />
<label for="checkbox_14"></label>
<label for="checkbox_14"></label>
</div>
<div class="DIV_switch_box yellow">
<input id="checkbox_15" type="checkbox" checked disabled />
<label for="checkbox_15"></label>
<label for="checkbox_15"></label>
</div>
<div class="DIV_switch_box red">
<input id="checkbox_16" type="checkbox" checked disabled />
<label for="checkbox_16"></label>
<label for="checkbox_16"></label>
</div>
<div class="DIV_switch_box purple">
<input id="checkbox_17" type="checkbox" checked disabled />
<label for="checkbox_17"></label>
<label for="checkbox_17"></label>
</div>
<div class="DIV_switch_box orange">
<input id="checkbox_18" type="checkbox" checked disabled />
<label for="checkbox_18"></label>
<label for="checkbox_18"></label>
</div>
<div class="DIV_switch_box cyan">
<input id="checkbox_19" type="checkbox" checked disabled />
<label for="checkbox_19"></label>
<label for="checkbox_19"></label>
</div>
结果：