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

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

浏览量:5889 时间: 来源:wangsq-js

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

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎