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

改变小程序的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-group>

2、中间圆点可以用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的倍数,避免奇数像素的时候一像素无法分配(没有居中)。

  • 11
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值