<!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资源评论
毕业_设计
- 粉丝: 1980
- 资源: 1万+
最新资源
- cubeex是基于vue2.0开发的组件库，将包含一套完整的移动UI.zip
- MineAdmin是基于Hyperf框架 和 Vue3+Vite5 开发的前后端分离权限管理系统，自适应多终端 特色：后端 crud 生成 + 前端低代码 json 化配置.zip
- Preact前端框架，一键部署到云开发平台.zip
- bpi flash读ID程序
- Lessgo 是一款简单、稳定、高效、灵活的 golang web 开发框架，支持动态路由、自动化API测试文档、热编译、热更新等，实现前后端分离、系统与业务分离.zip
- 2019计算机联考408代码题
- easyink的前端服务之一，基于企业微信JS-SDK开发的企微客户端侧边栏页面.zip
- DRF-ADMIN后台管理系统项目（端代码）.zip
- micro-app-chrome-plugin是基于京东零售推出的一款为micro-app框架而开发的chrome插件.zip
- front-end project template 前端快速开发模版.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
