E企盈小程序营销工具技术服务商 热线:4006-838-530

小程序radio自定样式的坑(选中颜色,背景)

E企盈小程序直播系统

改变小程序的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的倍数,避免奇数像素的时候一像素无法分配(没有居中)。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序radio自定样式的坑(选中颜色,背景)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏