h5、小程序自定义radio样式

UI在设计表单radio的时候为了适应页面整体的颜色和风格，很多时候会有自己的按钮样式，代替默认的样式，本文介绍了h5和小程序修改radio的方式。

一、h5修改radio为图片
二、小程序修改radio样式

一、h5修改radio为图片

两个按钮是两张图片

灰色代表未选中，紫色代表选中

html：

<div class="radio">
	<label>
		<!--多组单选时可以设置不同的name值，但要保证一组的两个name值相同-->
		<input type="radio" name="sex" value="" checked="checked" />
		<div class="option"></div>
		<!--该div盛放的是优化后的按钮图片-->
		<span class="opt-text">男</span>
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="sex" value="" />
		<div class="option"></div>
		<!--该div盛放的是优化后的按钮图片-->
		<span class="opt-text">女</span>
	</label>
</div>

css：

label {
	/*设置label的样式*/
	width: 100px;
	padding: 10px 0px;
	line-height: 20px;
	position: relative;
	font-weight: normal;
	border: 1px solid #99e;
	float: left;
}

.radio .option {
	/*把优化后的按钮图片设置为该div的背景图片，把该div定位到原生样式的上方，遮盖住原生样式。*/
	border: 1px solid #e9e;
	width: 25px;
	height: 25px;
	position: absolute;
	top: 10px;
	left: 0px;
	background-size: cover;
	/*未选中的样式图片*/
	background: url(img/p5_grey.png) no-repeat;
	background-size: cover;
}

.radio input[type="radio"] {
	/*为了保险起见，把原生样式隐藏掉*/
	margin-right: 15px;
	opacity: 0;
}

input[type="radio"]:checked+div {
	/*当radiuo被选中时，把input下边的div标签的背景图片替换掉*/
	background: url(img/p5_purple.png) no-repeat;
	background-size: cover;
}

js: jq获取选中按钮对应的值的代码

$("input:radio:checked").val();

二、小程序修改radio样式

wxml

<radio-group name="radio">
	<label><radio value="radio1" />是</label>
	<label><radio value="radio2" />否</label>
</radio-group>

wxss

/* 选中后的背景样式*/
/*按钮的大小*/
radio .wx-radio-input {
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
}

radio .wx-radio-input.wx-radio-input-checked {
    /* 背景颜色 */
    background-color: #fff !important;
    /* 边框颜色 */
    border-color: #419dea !important;
}

/* 选中后的实心样式*/
radio .wx-radio-input.wx-radio-input-checked::before {
    /* 将对号去掉 */
    content: '';
    /*实心圆圈的大小*/
    width: 18rpx;
    height: 18rpx;
    /*将圆角设置成50%才是一个圆*/
    border-radius: 50%;
    /*圆圈颜色*/
    background-color: #419dea;
}

/* 以下样式，当radio和文字垂直方向对不齐时可设置，checkbox同理 */
/* radio{
  vertical-align: middle;
  vertical-align: 2rpx;
}
 */

修改checkbox多选框样式，将radio改为checkbox即可

完成！