css自定义radio选择样式

/*两个复选框box浮动，方便设置css*/
			.radio{
				display:-moz-box;
				display:-webkit-box;
				display:box;
				float:left;
			}
			/*让原有的复选框图案隐藏*/
			.radios input[type=radio]{
				display: none;
			}
			/*图片和文字都放在label里面*/
			.radios span{
				display:-moz-box;
				display:-webkit-box;
				display:box;
				float:left;
				line-height: 20px;/*不设行高文字垂直方向不居中*/
				text-indent: 30px;/*使文字缩进：文字和图片都在label里面，不缩进文字和图片叠加在一起*/
				background:url(${ctxPath}/static/image/radios_false.png) no-repeat left top;/*背景图片*/
				background-size: 20px 20px;/*设置背景图片大小*/
			}
			.radios input[type=radio]:checked + span{
				background:url(${ctxPath}/static/image/radios_true.gif) no-repeat left top;/*被选中时，换背景图片*/
				background-size: 20px 20px;
			}

<div class="radios" v-for="(item,index) in List">
						<label>
							<input type="radio" name="optionsRadios" id="optionsRadios1" :value="item.pro_id"  :checked="item.pro_id==Id"/>
							<span :id="item.pro_id">{{item.pro_name}}</span>
						</label>
					</div>