利用CSS3实现单选复选开关按钮美化特效



16 62 21



特效描述:利用CSS3实现 单选复选 开关按钮 美化特效,利用CSS3实现单选复选开关按钮美化特效

代码结构

1. 引入CSS

<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">

2. HTML代码

<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_7" value="option" disabled>
				<label class="el-radio-style" for="2_7"></label>
			</div>
			<div class="el-radio el-radio-green">
				<span class="margin-r">Checked && Disabled</span>
				<input type="radio" id="2_8" value="option" checked disabled>
				<label class="el-radio-style" for="2_8"></label>
			</div>
		</div>
		<div class="col-md-4">
			<h4 >Switch</h4>
			<div>
				<span class="margin-r">switch</span>
				<label class="el-switch el-switch-green">
					<input type="checkbox" name="switch">
					<span class="el-switch-style"></span>
				</label>
			</div>
			<div>
				<span class="margin-r">switch</span>
				<label class="el-switch el-switch-green">
					<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 el-switch-green">
					<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 el-switch-green">
					<input type="checkbox" name="switch" checked disabled>
					<span class="el-switch-style"></span>
				</label>
			</div>
		</div>
	</div>
	<h3 class="text-center">Red theme</h3>
	<div class="row">
		<div class="col-md-4">
			<h4 >Checkbox</h4>
			<div class="el-checkbox el-checkbox-red">
				<span class="margin-r">Unchecked</span>
				<input type="checkbox" name="check" id="3_1">
				<label class="el-checkbox-style" for="3_1"></label>
			</div>
			<div class="el-checkbox el-checkbox-red">
				<span class="margin-r">Checked</span>
				<input type="checkbox" name="check26" id="3_2" checked>
				<label class="el-checkbox-style" for="3_2"></label>
			</div>
			<div class="el-checkbox el-checkbox-red">
				<span class="margin-r">Disabled</span>
				<input type="checkbox" name="check" id="3_3" value="option" disabled>
				<label class="el-checkbox-style" for="3_3"></label>
			</div>
			<div class="el-checkbox el-checkbox-red">
				<span class="margin-r">Checked && Disabled</span>
				<input type="checkbox" name="check" id="3_4" checked disabled>
				<label class="el-checkbox-style" for="3_4"></label>
			</div>
		</div>
		<div class="col-md-4">
			<h4>Radio</h4>
			<div class="el-radio el-radio-red">
				<span class="margin-r">Unchecked</span>
				<input type="radio" name="radio1" id="3_5" value="option" >
				<label class="el-radio-style" for="3_5"></label>
			</div>
			<div class="el-radio el-radio-red">
				<span class="margin-r">Checked</span>
				<input type="radio" name="radio104" id="3_6" value="option" checked>
				<label class="el-radio-style" for="3_6"></label>
			</div>
			<div class="el-radio el-radio-red">
				<span class="margin-r">Disabled</span>
				<input type="radio" id="3_7" value="option" disabled>
				<label class="el-radio-style" for="3_7"></label>
			</div>
			<div class="el-radio el-radio-red">
				<span class="margin-r">Checked && Disabled</span>
				<input type="radio" id="3_8" value="option" checked disabled>
				<label class="el-radio-style" for="3_8"></label>
			</div>
		</div>
		<div class="col-md-4">
			<h4 >Switch</h4>
			<div>
				<span class="margin-r">switch</span>
				<label class="el-switch el-switch-red">
					<input type="checkbox" name="switch">
					<span class="el-switch-style"></span>
				</label>
			</div>
			<div>
				<span class="margin-r">switch</span>
				<label class="el-switch el-switch-red">
					<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 el-switch-red">
					<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 el-switch-red">
					<input type="checkbox" name="switch" checked disabled>
					<span class="el-switch-style"></span>
				</label>
			</div>
		</div>
	</div>
	<h3 class="text-center">Yellow theme</h3>
	<div class="row">
		<div class="col-md-4">
			<h4 >Checkbox</h4>
			<div class="el-checkbox el-checkbox-yellow">
				<span class="margin-r">Unchecked</span>
				<input type="checkbox" name="check" id="4_1">
				<label class="el-checkbox-style" for="4_1"></label>
			</div>
			<div class="el-checkbox el-checkbox-yellow">
				<span class="margin-r">Checked</span>
				<input type="checkbox" name="check" id="4_2" checked>
				<label class="el-checkbox-style" for="4_2"></label>
			</div>
			<div class="el-checkbox el-checkbox-yellow">
				<span class="margin-r">Disabled</span>
				<input type="checkbox" name="check" id="4_3" value="option" disabled>
				<label class="el-checkbox-style" for="4_3"></label>
			</div>
			<div class="el-checkbox el-checkbox-yellow">
				<span class="margin-r">Checked && Disabled</span>
				<input type="checkbox" name="check" id="4_4" checked disabled>
				<label class="el-checkbox-style" for="4_4"></label>
			</div>
		</div>
		<div class="col-md-4">
			<h4>Radio</h4>
			<div class="el-radio el-radio-yellow">
				<span class="margin-r">Unchecked</span>
				<input type="radio" name="radio1" id="4_5" value="option">
				<label class="el-radio-style" for="4_5"></label>
			</div>
			<div class="el-radio el-radio-yellow">
				<span class="margin-r">Checked</span>
				<input type="radio" name="radio109" id="4_6" value="option" checked>
				<label class="el-radio-style" for="4_6"></label>
			</div>
			<div class="el-radio el-radio-yellow">
				<span class="margin-r">Disabled</span>
				<input type="radio" id="4_7" value="option" disabled>
				<label class="el-radio-style" for="4_7"></label>
			</div>
			<div class="el-radio el-radio-yellow">
				<span class="margin-r">Checked && Disabled</span>
				<input type="radio" id="4_8" value="option" checked disabled>
				<label class="el-radio-style" for="4_8"></label>
			</div>
		</div>
		<div class="col-md-4">
			<h4 >Switch</h4>
			<div>
				<span class="margin-r">switch</span>
				<label class="el-switch el-switch-yellow">
					<input type="checkbox" name="switch">
					<span class="el-switch-style"></span>
				</label>
			</div>
			<div>
				<span class="margin-r">switch</span>
				<label class="el-switch el-switch-yellow">
					<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 el-switch-yellow">
					<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 el-switch-yellow">
					<input type="checkbox" name="switch" checked disabled>
					<span class="el-switch-style"></span>
				</label>
			</div>
		</div>
	</div>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 切换按钮 表单 表单美化 表单插件 表单美化插件 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到