纯CSS代码 lable标签单选项标签优化

<!doctype html>
<html>
<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" />
<tetle>CSS代码 lable标签单选项标签优化</tetle>
<style type="text/css">
body {
     
	font: 14px/150% microsoft yahei,tahoma;
	}
.clear {
     
	clear: both
	}

.RadioStyle input {
     
	display: none
	}
.RadioStyle label {
     
	border: 1px solid #CCC;
	color: #666;
	padding: 2px 10px 2px 5px;
	line-height: 28px;
	min-width: 80px;
	text-align: center;
	float: left;
	margin: 2px;
	border-radius: 4px
	}
.RadioStyle input:checked + label {
     
	background: url(/images/ico_checkon.svg) no-repeat right bottom;
	border: 1px solid #00a4ff;
	background-size: 21px 21px;
	color: #00a4ff
	}
.RadioStyle input:disabled + label {
     
	opacity: 0.7;
	}
</style>

</head>

<body>
<!--男生主播 -->
<div class="RadioStyle">
<h3>男生主播</h3>
	<div class="Block PaddingL">
		<input type="radio" name="voice" id="model1" checked value="Aida" />
			<label for="model1">艾达-标准男生</label>
		<input type="radio" name="voice" id="model2" value="Aicheng" />
			<label for="model2">艾诚-标准男生</label>
		<input type="radio" name="voice" id="model3" value="Sicheng" />
			<label for="model3">思诚-标准男生</label>
		<input type="radio" name="voice" id="model4" value="Xiaowei" />
			<label for="model4">小威-标准男生</label>
		<input type="radio" name="voice" id="model5" value="Xiaogang"  />
			<label for="model5">小刚-标准男生</label>			
	</div>
</div>
<div class="clear"></div>
<!-- 女生主播 -->
<div class="RadioStyle">
<h3>女生主播</h3>
	<div class="Block PaddingL">
		<input type="radio" name="voice" id="model7"  value="Xiaoyun" />
			<label for="model7">小云-标准女生</label>
		<input type="radio" name="voice" id="model8"  value="Xiaomeng" />
			<label for="model8">小梦-标准女生</label>
		<input type="radio" name="voice" id="model9" value="Sijia" />
			<label for="model9">思佳-标准女生</label>
		<input type="radio" name="voice" id="model10" value="Aijia" />
			<label for="model10">艾佳-标准女生</label>
		<input type="radio" name="voice" id="model11" value="Ninger" />
			<label for="model11">宁儿-标准女生</label>	
	    <input type="radio" name="voice" id="model12" value="Ruilin" />
			<label for="model12">瑞琳-标准女生</label>
	</div>

</div>
<div class="clear"></div>
<div class="RadioStyle">
	<div class="Block PaddingL">
		<input type="radio" name="voice" id="model13" value="Ruoxi"  />
			<label for="model13">若兮-温柔女生</label>
		<input type="radio" name="voice" id="model14" value="Siqi"  />
			<label for="model14">思琪-温柔女生</label>
		<input type="radio" name="voice" id="model15" value="Aiqi"  />
			<label for="model15">艾琪-温柔女生</label>
		<input type="radio" name="voice" id="model16"  value="Xiaoxue" />
			<label for="model16">小雪-温柔女生</label>
		<input type="radio" name="voice" id="model17" value="Siyue" />
			<label for="model17">思悦-温柔女生</label>	
		<input type="radio" name="voice" id="model18" value="Aiyue" />
		    <label for="model18">艾悦-温柔女生</label>	
</div>
<div class="clear"></div>

<div class="RadioStyle">
	<div class="Block PaddingL">
		<input type="radio" name="voice" id="model19" value="Amei"/>
			<label for="model19">阿美-甜美女生</label>
		<input type="radio" name="voice" id="model20" value="Aiya" />
			<label for="model20">艾雅-严厉女生</label>
		<input type="radio" name="voice" id="model21" value="Aixia" />
			<label for="model21">艾夏-亲和女生</label>
		<input type="radio" name="voice" id="model22" value="Aimei" />
			<label for="model22">艾美-甜美女生</label>
		<input type="radio" name="voice" id="model23" value="Aiyu"/>
			<label for="model23">艾雨-自然女生</label>
		<input type="radio" name="voice" id="model24" value="Xiaomei"/>
			<label for="model24">小美-甜美女生</label>					
    </div>	
</div>
<div class="clear"></div>

<div class="RadioStyle">
	<div class="Block PaddingL">
		<input type="radio" name="voice" id="model25" value="Yina" />
			<label for="model25">伊娜-浙普女生</label>
		<input type="radio" name="voice" id="model26" value="Sijing" />
			<label for="model26">思婧-严厉女生</label>		
    </div>	
</div>
<div class="clear"></div>

<div class="RadioStyle">
<h3>童声主播</h3>
	<div class="Block PaddingL">
		<input type="radio" name="voice" id="model27" value="Sitong"/>
			<label for="model27">思彤-儿童声音</label>
		<input type="radio" name="voice" id="model28" value="Aitong"/>
			<label for="model28">艾彤-儿童声音</label>
		<input type="radio" name="voice" id="model29" value="Xiaobei"/>
			<label for="model29">小北-儿童声音</label>
		<input type="radio" name="voice" id="model30" value="Aiwei"/>
			<label for="model30">艾薇-儿童声音</label>
		<input type="radio" name="voice" id="model31" value="Aibao"/>
			<label for="model31">艾宝-儿童声音</label>
    </div>	
</div>
<div class="clear"></div>

<div class="RadioStyle">
<h3>方言主播</h3>
	<div class="Block PaddingL">
		<input type="radio" name="voice" id="model32" value="Shanshan" />
			<label for="model32">珊珊-粤语女声</label>
    </div>	
</div>
<div class="clear"></div>
<div class="RadioStyle">
<h3>英文主播</h3>
	<div class="Block PaddingL">
		<input type="radio" name="voice" id="model33" value="Halen" />
			<label for="model33">Halen-英文配音</label>
		<input type="radio" name="voice" id="model34"  value="Harry" />
			<label for="model34">Harry-英文配音</label>
		<input type="radio" name="voice" id="model35" value="Eric" />
			<label for="model35">Eric-英文配音</label>
		<input type="radio" name="voice" id="model36" value="Emily" />
			<label for="model36">Emily-英文配音</label>
		<input type="radio" name="voice" id="model37" value="Luna" />
			<label for="model37">Luna-英文配音</label> 
		<input type="radio" name="voice" id="model38" value="Luca" />
			<label for="model38">Luca-英文配音</label>	
    </div>	
</div>
<div class="clear"></div>
<div class="RadioStyle">
	<div class="Block PaddingL">
		<input type="radio" name="voice" id="model39" value="Wendy" />
			<label for="model39">Wendy-英文配音</label>
		<input type="radio" name="voice" id="model40" value="William" />
			<label for="model40">William-英文配音</label>
		<input type="radio" name="voice" id="model41" value="Olivia" />
			<label for="model41">Olivia-英文配音</label>
    </div>	
</div>


</body>
</html>

纯CSS代码 lable标签单选项标签优化_第1张图片

lable标签 简单Demo预览效果

你可能感兴趣的:(HTML代码,lable,标签,html5,单选框,广告配音,广告录音)