由於業務需求，本樣式中修改的單選框和複選框的樣式是一樣的。

效果圖：

        複選框                                                           單選框

1.標籤

<!--複選框標籤-->
<ul class="format">
	<li>
		<input v-model="useData.ChnProperties.Enable" type="checkbox" id="name" />
		<label for="name">顯示名稱</label>
	</li>
	<li>
		<input v-model="useData.TimeProperties.ShowTime" type="checkbox" id="date" />
		<label for="date">顯示日期</label>
	</li>
	<li>
		<input v-model="useData.TimeProperties.ShowWeek" type="checkbox" id="week" />
		<label for="week">顯示星期</label>
	</li>
	<li>
	    <input v-model="useData.ShowLogo" type="checkbox" id="logo" />
		<label for="logo">顯示LOGO</label>
	</li>
</ul>

<!--單選框標籤-->
<div class="param">
	<input type="radio" name="proto" id="tcp" value="" />
	<label for="tcp">TCP</label>
	<input type="radio" name="proto" id="udp" value="" />
	<label for="udp">UDP</label>
</div>
 

2.複選框樣式程式碼

/*公共樣式*/
input[type="checkbox"]{
	display: none;
}
input[type="checkbox"]+label:before {
    display: inline-block;
  	content: "";
    width: 0.6vw;
    height: 0.6vw;
    border: 1px solid #61A5FF;
    border-radius: 50%;
    margin-right: 1vw;
} 
input[type="checkbox"]:checked+label:before {
	background: #61A5FF;
}
/*單獨設定樣式*/
.format li{
	margin-bottom: 0.8vw;
	text-align: left;
}
.format li label{
	width: 8vw;
	margin-left: 7vw;
	font-size: 0.97vw;
}
 

3.單選框樣式程式碼

input[type='radio']{
    display:none; 
}
input[type='radio'] + label:before{
	content: "";
    display: inline-block;
    width: 0.6vw;
    height: 0.6vw;
    margin-right: 10px;
    border-radius: 50%;
    border: 1px solid #61A5FF;
}

input[type='radio']:checked+label:before{
   	background-color: #61A5FF;
    color: #fff;
}