The front end uses input to write radio, and the applet can also use < radio / > single label if it uses radio label
1. Custom radio style
Wx is really ugly by default
/*Radio box style*/
/*Initial style*/
radio .wx-radio-input{
width: 32rpx;
height: 32rpx;
border-radius: 0
}
/*Selected background style (background border)*/
radio .wx-radio-input.wx-radio-input-checked{
Width: 32rpx; / * check the size of the checkmark, not to exceed the size of the background*/
Height: 32rpx; / * check the size of the checkmark, not to exceed the size of the background*/
background:white!important;
}
/*Checkmark style after selection*/
radio .wx-radio-input.wx-radio-input-checked::before{
Width: 32rpx; / * check the size of the checkmark, not to exceed the size of the background*/
Height: 32rpx; / * check the size of the checkmark, not to exceed the size of the background*/
line-height: 32rpx;
text-align: center;
Font size: 36rpx; / * tick size*/
Color: black; / * checkmark color*/
background: white;
transform:translate(-50%, -50%) scale(1);
-webkit-transform:translate(-50%, -50%) scale(1);
}2. Single check and then check to cancel the effect
wxml:
< radio checked = '{{check}}' bindtap '=' / radio > < label for = "radios" > anonymous < / label >wx.js
//This code is written in data
check:false
radiocon:function(e){
this.setData({
check: !this.data.check
})
Console.log ("this. Data. Check" is checked by the user)
},This completes the click tick and then click Cancel.
Above.