修改单选框，复选框默认样式 input[type='radio'] input[type="checkbox"]

由于业务需求，本样式中修改的单选框和复选框的样式是一样的。

效果图：

        复选框                                                           单选框

                                    

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;
}