weui weui-cell radio 自定义图标缩略图
<div class="weui-cells_radio">
	<label class="weui-cell  weui-check__label" for="en">
		<div class="lang-icon"><img src="images/usa.png" ></div>
		<div class="weui-cell__bd">
			<p>English</p>
		</div>
		<div class="weui-cell__ft">
			<input type="radio" name="radio1" class="weui-check" id="en" checked="checked">
			<span class="weui-icon-checked"></span>
		</div>
	</label>
	<label class="weui-cell  weui-check__label" for="zh">
		<div class="lang-icon"><img src="images/zh.png" ></div>
		<div class="weui-cell__bd">
			<p>简体中文</p>
		</div>
		<div class="weui-cell__ft">
			<input type="radio" class="weui-check" name="radio1" id="zh">
			<span class="weui-icon-checked"></span>
		</div>
	</label>
	<label class="weui-cell  weui-check__label" for="ko">
		<div class="lang-icon"><img src="images/korea.png" ></div>
		<div class="weui-cell__bd">
			<p>Korean</p>
		</div>
		<div class="weui-cell__ft">
			<input type="radio" name="radio1" class="weui-check" id="ko" checked="checked">
			<span class="weui-icon-checked"></span>
		</div>
	</label>
</div>

/* weui-cells_radio */
.weui-cells_radio .weui-check__label{
	background-color: #FFFFFF;
	border-radius: 10px;
	margin-bottom: 15px;
	box-shadow: 0 0 12px rgba(0,0,0,.03);
}
.weui-cells_radio .weui-check__label::before{
	display: none;
}
.currency-icon {
	margin-right: 10px;
	font-size: 0;
}
.currency-icon img{
	width: 30px;
	height: 30px;
}
.lang-icon {
	margin-right: 10px;
	font-size: 0;
}
.lang-icon img{
	width: 30px;
	height: 30px;
}

.weui-cells_radio .weui-check+.weui-icon-checked{
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url(../images/radio.png);
	width: 20px;
	height: 20px;
}

.weui-cells_radio .weui-check:checked+.weui-icon-checked, .weui-cells_radio .weui-check[aria-checked="true"]+.weui-icon-checked {
	background-image: url(../images/radioed.png);
	-webkit-mask-image: unset;
	color: transparent;
}

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注