<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>CSS3单选复选开关按钮美化特效</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<link rel="stylesheet" href="dist/checkbox.css">
<style>
.margin-r{
margin-right:10px;
vertical-align: top;
line-height:1.6;
}
.container{
width:900px;
padding-bottom:100px;
}
.btn-primary{
border-color: #20a0ff !important;
background-color: #20a0ff !important;
margin-right:20px;
}
</style>
</head>
<body>
<div class="datouwang-container">
<div class="container">
<h3 class="text-center">Default theme</h3>
<div class="row">
<div class="col-md-4">
<h4 >Checkbox</h4>
<div class="el-checkbox">
<span class="margin-r">Unchecked</span>
<input type="checkbox" name="check" id="1_1">
<label class="el-checkbox-style" for="1_1"></label>
</div>
<div class="el-checkbox">
<span class="margin-r">Checked</span>
<input type="checkbox" name="check" id="1_2" checked>
<label class="el-checkbox-style" for="1_2"></label>
</div>
<div class="el-checkbox">
<span class="margin-r">Disabled</span>
<input type="checkbox" name="check" id="1_3" value="option" disabled>
<label class="el-checkbox-style" for="1_3"></label>
</div>
<div class="el-checkbox">
<span class="margin-r">Checked && Disabled</span>
<input type="checkbox" name="check" id="1_4" checked disabled>
<label class="el-checkbox-style" for="1_4"></label>
</div>
</div>
<div class="col-md-4">
<h4>Radio</h4>
<div class="el-radio">
<span class="margin-r">Unchecked</span>
<input type="radio" name="radio1" id="1_5" value="option" >
<label class="el-radio-style" for="1_5"></label>
</div>
<div class="el-radio">
<span class="margin-r">Checked</span>
<input type="radio" name="radio101" id="1_6" value="option" checked>
<label class="el-radio-style" for="1_6"></label>
</div>
<div class="el-radio">
<span class="margin-r">Disabled</span>
<input type="radio" id="1_7" value="option" disabled>
<label class="el-radio-style" for="1_7"></label>
</div>
<div class="el-radio">
<span class="margin-r">Checked && Disabled</span>
<input type="radio" id="1_8" value="option" checked disabled>
<label class="el-radio-style" for="1_8"></label>
</div>
</div>
<div class="col-md-4">
<h4 >Switch</h4>
<div>
<span class="margin-r">switch</span>
<label class="el-switch">
<input type="checkbox" name="switch">
<span class="el-switch-style"></span>
</label>
</div>
<div>
<span class="margin-r">switch</span>
<label class="el-switch">
<input type="checkbox" name="switch" checked>
<span class="el-switch-style"></span>
</label>
</div>
<div>
<span class="margin-r">Disabled</span>
<label class="el-switch">
<input type="checkbox" name="switch" disabled>
<span class="el-switch-style"></span>
</label>
</div>
<div>
<span class="margin-r">Checked && Disabled</span>
<label class="el-switch">
<input type="checkbox" name="switch" checked disabled>
<span class="el-switch-style"></span>
</label>
</div>
</div>
</div>
<h3 class="text-center">Size</h3>
<div class="row">
<div class="col-md-4">
<h4 >Checkbox(外部label包裹)</h4>
<label class="el-checkbox el-checkbox-sm">
<span class="margin-r">small checkbox</span>
<input type="checkbox" name="check" checked>
<span class="el-checkbox-style pull-right"></span>
</label>
<label class="el-checkbox">
<span class="margin-r">default checkbox</span>
<input type="checkbox" name="check" checked>
<span class="el-checkbox-style pull-right"></span>
</label>
<label class="el-checkbox el-checkbox-lg">
<span class="margin-r">large checkbox</span>
<input type="checkbox" name="check" checked>
<span class="el-checkbox-style pull-right"></span>
</label>
<label class="el-checkbox" style="font-size:150%">
<span class="margin-r">custom size</span>
<input type="checkbox" name="check" checked>
<span class="el-checkbox-style pull-right"></span>
</label>
</div>
<div class="col-md-4">
<h4 >Radio(外部label包裹)</h4>
<label class="el-radio el-radio-sm">
<span class="margin-r">small radio</span>
<input type="radio" name="radio_size">
<span class="el-radio-style pull-right"></span>
</label>
<label class="el-radio">
<span class="margin-r">default radio</span>
<input type="radio" name="radio_size" checked>
<span class="el-radio-style pull-right"></span>
</label>
<label class="el-radio el-radio-lg">
<span class="margin-r">large radio</span>
<input type="radio" name="radio_size">
<span class="el-radio-style pull-right"></span>
</label>
<label class="el-radio" style="font-size:150%">
<span class="margin-r">custom size</span>
<input type="radio" name="radio_size">
<span class="el-radio-style pull-right"></span>
</label>
</div>
<div class="col-md-4">
<h4 >Switch</h4>
<div>
<span class="margin-r">small switch</span>
<label class="el-switch el-switch-sm">
<input type="checkbox" name="switch" checked>
<span class="el-switch-style"></span>
</label>
</div>
<div>
<span class="margin-r">default switch</span>
<label class="el-switch">
<input type="checkbox" name="switch" checked>
<span class="el-switch-style"></span>
</label>
</div>
<div>
<span class="margin-r">large switch</span>
<label class="el-switch el-switch-lg">
<input type="checkbox" name="switch" checked>
<span class="el-switch-style"></span>
</label>
</div>
<div>
<span class="margin-r">custom size</span>
<label class="el-switch" style="font-size:150%">
<input type="checkbox" name="switch" checked>
<span class="el-switch-style"></span>
</label>
</div>
</div>
</div>
<h3 class="text-center">Green theme</h3>
<div class="row">
<div class="col-md-4">
<h4 >Checkbox</h4>
<div class="el-checkbox el-checkbox-green">
<span class="margin-r">Unchecked</span>
<input type="checkbox" name="check" id="2_1">
<label class="el-checkbox-style" for="2_1"></label>
</div>
<div class="el-checkbox el-checkbox-green">
<span class="margin-r">Checked</span>
<input type="checkbox" name="check23" id="2_2" checked>
<label class="el-checkbox-style" for="2_2"></label>
</div>
<div class="el-checkbox el-checkbox-green">
<span class="margin-r">Disabled</span>
<input type="checkbox" name="check" id="2_3" value="option" disabled>
<label class="el-checkbox-style" for="2_3"></label>
</div>
<div class="el-checkbox el-checkbox-green">
<span class="margin-r">Checked && Disabled</span>
<input type="checkbox" name="check" id="2_4" checked disabled>
<label class="el-checkbox-style" for="2_4"></label>
</div>
</div>
<div class="col-md-4">
<h4>Radio</h4>
<div class="el-radio el-radio-green">
<span class="margin-r">Unchecked</span>
<input type="radio" name="radio1" id="2_5" value="option">
<label class="el-radio-style" for="2_5"></label>
</div>
<div class="el-radio el-radio-green">
<span class="margin-r">Checked</span>
<input type="radio" name="radio105" id="2_6" value="option" checked>
<label class="el-radio-style" for="2_6"></label>
</div>
<div class="el-radio el-radio-green">
<span class="margin-r">Disabled</span>
<input type="radio" id="2_
CSS3美化单选复选开关按钮样式特效源码.zip （5个子文件） 
132689841027594728 css 
bootstrap.min.css 118KB zzsc.css 181B
index.html 15KB dist checkbox.css 10KB checkbox.min.css 9KB资源评论
毕业_设计
- 粉丝: 1993
- 资源: 1万+
最新资源
- dataCollection-资源文件
- Java-Interview-Advanced-啊哦111
- Pear Admin Layui-资源文件
- 1615-1.6米写真机(数码印花机) sw14可编辑全套技术资料100%好用.zip
- FDG-A1∕D-56电子防盗保险柜sw16可编辑全套技术资料100%好用.zip
- A17038产品自动锁螺丝机sw17可编辑全套技术资料100%好用.zip
- 半自动U型上止焊接机（sw16可编辑+工程图）全套技术资料100%好用.zip
- 四工位高速塞棉机sw18全套技术资料100%好用.zip
- 消磁生产线sw17可编辑全套技术资料100%好用.zip
- 2.5mm铜箔焊线机sw19可编辑全套技术资料100%好用.zip
- 20T双级级水处理设备step全套技术资料100%好用.zip
- C语言编程实现不同类型的圣诞树
- HTML与JavaScript实现圣诞节飘雪效果代码详解
- 20米双层倍速链sw18可编辑全套技术资料100%好用.zip
- MC-160袋式除尘器sw18可编辑全套技术资料100%好用.zip
- 毕业设计-基于Flask健身论坛 详细文档+全部资料+高分项目.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
