微信小程序> 微信小程序完美修改checkbox/radio样式-小程序怎么美化-小程序优化排名

微信小程序完美修改checkbox/radio样式-小程序怎么美化-小程序优化排名

浏览量:4315 时间: 来源:欧巴酱
1.

1.修改checkbox样式

/*重写checkbox样式*//*未选中的背景样式*/checkbox.wx-checkbox-input{border-radius:50%;/*圆角*/width:40rpx;/*背景的宽*/height:40rpx;/*背景的高*/}/*选中后的背景样式(红色背景无边框可根据UI需求自己修改)*/checkbox.wx-checkbox-input.wx-checkbox-input-checked{border:none;background:red;}/*选中后的对勾样式(白色对勾可根据UI需求自己修改)*/checkbox.wx-checkbox-input.wx-checkbox-input-checked::before{border-radius:50%;/*圆角*/width:40rpx;/*选中后对勾大小,不要超过背景的尺寸*/height:40rpx;/*选中后对勾大小,不要超过背景的尺寸*/line-height:40rpx;text-align:center;font-size:30rpx;/*对勾大小30rpx*/color:#fff;/*对勾颜色白色*/background:transparent;transform:translate(-50%,-50%)scale(1);-webkit-transform:translate(-50%,-50%)scale(1);}2.

2.修改radio样式

/*重写radio样式*//*未选中的背景样式*/radio.wx-radio-input{border-radius:50%;/*圆角*/width:40rpx;height:40rpx;}/*选中后的背景样式(红色背景无边框可根据UI需求自己修改)*/radio.wx-radio-input.wx-radio-input-checked{border:none;background:red;}/*选中后的对勾样式(白色对勾可根据UI需求自己修改)*/radio.wx-radio-input.wx-radio-input-checked::before{border-radius:50%;/*圆角*/width:40rpx;/*选中后对勾大小,不要超过背景的尺寸*/height:40rpx;/*选中后对勾大小,不要超过背景的尺寸*/line-height:40rpx;text-align:center;font-size:30rpx;/*对勾大小30rpx*/color:#fff;/*对勾颜色白色*/background:transparent;transform:translate(-50%,-50%)scale(1);-webkit-transform:translate(-50%,-50%)scale(1);}3.

使用方法:直接粘贴到相应wxss页面也可放到全局Css页

版权声明

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

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

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