1 <view class=\'warp\'> 2 <view class=\'title\'>xxxxxxxx</view> 3 <view class=\'warpRadio\'> 4 <!-- color=\'transparent\'选中无色 --> 5 <radio value=\'\'checked="checked" color=\'transparent\' >A.bbmnlfklk</radio> 6 7 </view> 8 <view class=\'warpRadio\'> 9 <radio value checked="checked" color=\'transparent\'>B.bbmnlfklk</radio> 10 11 </view> 12 13 </view>
1 .warp{ 2 width: 500rpx; 3 height: 230rpx; 4 border: 1rpx solid #000; 5 margin: 30rpx auto; 6 border-radius: 10rpx; 7 } 8 .title{ 9 width: 300rpx; 10 height: 40rpx; 11 12 margin: auto; 13 text-align: center; 14 } 15 radio .wx-radio-input{ 16 /*设置radio大小*/ 17 width: 25rpx; 18 height: 25rpx; 19 border: none;/*边框无展现*/ 20 /* border:1rpx solid #000; */ 21 22 } 23 .warpRadio{ 24 width: 300rpx; 25 height: 50rpx; 26 background-color: #539ad9; 27 font-size: 30rpx; 28 margin: 30rpx auto; 29 text-align: center; 30 line-height: 46rpx; 31 color: #fff; 32 } 33 radio .wx-radio-input.wx-radio-input-checked::before{ 34 color: transparent; 35 background-color: transparent;/*使背景色无展现*/ 36 border-radius: 50%;/* 圆角 */ 37 width: 40rpx; /* 选中后对勾大小,不要超过背景的尺寸 */ 38 height: 40rpx; /* 选中后对勾大小,不要超过背景的尺寸 */ 39 line-height: 40rpx; 40 text-align: center; 41 font-size:30rpx; /* 对勾大小 30rpx */ 42 43 /* color: blue; */ 44 /* background-color: transparent; */ 45 /* background-color: blue; 46 border: 1px solid #000;*/ 47 transform:translate(-50%, -50%) scale(1); 48 -webkit-transform:translate(-50%, -50%) scale(1); 49 }