1、方形对勾
image.png
/* 重写 checkbox 样式 */
/* 未选中的 背景样式 */
checkbox .wx-checkbox-input {
width: 14px; /* 背景的宽 */
height: 14px; /* 背景的高 */
}
/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
background: #CB4042;
border: 1px solid #CB4042;
}
/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
width: 14px; /* 选中后对勾大小，不要超过背景的尺寸 */
height: 14px; /* 选中后对勾大小，不要超过背景的尺寸 */
line-height: 14px;
text-align: center;
font-size: 12px; /* 对勾大小 */
background: transparent;
color: #fff;
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}
2、圆形点
image.png
/*重写单选框样式*/
radio {
border-radius: 50%;
width: 36rpx;/* 最好是4的倍数，不然会不在中间 */
height: 36rpx;
border: 1px solid #CB4042;/* 设置边框（外圆） */
font-size: 0;/* 让边框重合 */
}
/* 选中后的样式 */
radio .wx-radio-input.wx-radio-input-checked::before {
border-radius: 50%;
border: 1rpx solid #CB4042;
width: 20rpx;
height: 20rpx;
text-align: center;
font-size: 0; /* 对勾大小 去掉 */
background-color: #CB4042;
transform:translate(-50%, -50%) scale(1);
-webkit-transform:translate(-50%, -50%) scale(1);
}
/* 单选框样式重写 */
.confirm-order-cont radio .wx-radio-input {
border-radius: 50%;
width: 36rpx;
height: 36rpx;
border: none;/* 替换边框（隐藏原有边框） */
}
