https://www.jianshu.com/p/f8d7932006c0
https://blog.csdn.net/qq_36894527/article/details/83893426
/ * checkbox overall size * /
checkbox {
width: 240rpx;
height: 90rpx;
}
/ * block size option checkbox * /
checkbox .wx-INPUT-checkbox {
width: 50rpx;
height: 50rpx;
}
/ * * back the selected style checkbox /
checkbox .wx-checkbox-input.wx-checkbox the checked-INPUT-{
background: # FF525C;
}
/ * check the checkbox style icon * /
checkbox .wx-checkbox checkbox-INPUT-input.wx-before-the checked :: {
width: 28rpx;
height: 28rpx;
Line-height: 28rpx;
text-align = left: Center;
font-size: 22rpx;
Color: #fff;
background: transparent;
Transform: Translate (-50%, -50%) Scale ( 1);
-webkit-Transform: Translate (-50%, -50% ) Scale (. 1);
}
Modify radio style
Radio-INPUT-.wx Radio {
border-RADIUS: 50%; / * Fillet * /
width: 40rpx;
height: 40rpx;
}
/ * the selected background pattern (no red background border may be modified as their UI requirements) * /
Radio-Radio-.wx input.wx the checked-Radio-INPUT-{
border: none;
background: Red;
}
/ * select the checkmark pattern (white checkmark may be modified as their UI requirements) * /
Radio .wx Radio---input.wx -radio-INPUT before the checked :: {
border-RADIUS: 50%; / * fillet * /
width: 40rpx; / * check to tick size, do not exceed the size of the background * /
height: 40rpx; / * When you select the size of the check mark, do not exceed the size of the background * /
Line-height: 40rpx;
text-align = left: Center;
font-size: 30rpx; / * * tick size 30rpx /
-webkit-Transform: Translate (-50%, -50%) Scale (. 1);
Color: #fff; / * color white check mark * /
background: transparent;
the Transform: Translate (-50%, -50%) Scale (1);
}
---------------------
Disclaimer: This article is CSDN blogger "Obama sauce" of the original article, follow the CC 4.0 by-sa copyright agreement, reproduced attach the original source link and this statement.
Original link: https: //blog.csdn.net/qq_36894527/article/details/83893426
