改变小程序的radio 原生样式,与checkbox 不同##
再复选的时候可以用
checkbox .wx-checkbox-input.wx-checkbox-input-checked{background: red}来改变复选框选中的背景色
但是在单选radio 的的时候
radio .wx-radio-input.wx-radio-input-checked{ border: none; background: #f00; }背景无效,尝试很多方法,只有在wxml,中来设置color才有效
radio .wx-radio-input.wx-radio-input-checked 无效带来的麻烦很多,改变颜色只是其中一个,那么要实现下图效果怎么办呢
1、首先选中背景再wxml中设置为白色
!-- radiogroup 布局 --radio-group bindchange="radioChange" label wx:for="{{cartArr}}" radio value="{{index}}" color='#fff'/radio view{{item.name}}/view !-- 其他布局代码 -- /label /radio-group2、中间圆点可以用radio .wx-radio-input.wx-radio-input-checked::before 来实现
radio .wx-radio-input.wx-radio-input-checked::before{ border-radius: 50%; width: 20rpx; height: 20rpx; text-align: center; font-size:0rpx; /* 对勾大小 去掉 */ background-color: #00f; transform:translate(-50%, -50%) scale(1); -webkit-transform:translate(-50%, -50%) scale(1);}3、外面的边框可以这样
radio{ border-radius: 50%; width: 40rpx;/* 最好是4的倍数,不然会不在中间 */ height: 40rpx; border: 2rpx solid #666;/* 设置边框(外圆) */ font-size: 0;/* 让边框重合 */}radio .wx-radio-input{ border-radius: 50%; width: 40rpx; height: 40rpx; border: none;/* 替换边框(隐藏原有边框) */}边框重合,再选中的时候默认边框会消失(变成背景色白色),所以要设置一个边框替换原有边框
4的倍数,避免奇数像素的时候一像素无法分配(没有居中)。













