<!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
需积分: 9 28 浏览量
2022-10-31
02:14:57
上传
评论
收藏 25KB ZIP 举报
CSS3美化单选复选开关按钮样式特效源码.zip （5个子文件） 
132689841027594728 css 
bootstrap.min.css 118KB zzsc.css 181B
index.html 15KB dist checkbox.css 10KB checkbox.min.css 9KB资源评论
