二十四、小程序中改变checkbox和radio的样式
2024-10-11 21:32:02
来源:https://blog.csdn.net/qq_39364032/article/details/79742415
在微信小程序里面,有时候为了配合整个项目的风格,checkbox和radio的样式会有些不同。 1. 修改checkbox样式 .wxml <checkbox-group class='pull-left' bindchange="checkboxChange"> <label class="checkbox flex flex-vc "> <checkbox bindchange='checkboxChange' value="" checked="{{checkboxStatus}}" color='#fff'/> <view>可用2000个积分币抵扣</view> </label> </checkbox-group> .wxss /* checkbox未选中时样式 */ checkbox .wx-checkbox-input{ border-radius: 3rpx; height: 26rpx; width: 26rpx; margin-top: -4rpx; /* 自定义样式.... */ } /* checkbox选中时样式 */ checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{ background-color: #e02e24; border: 1rpx solid #e02e24; /* 自定义样式.... */ } 2. 修改radio样式 .wxml <radio-group class="radio-group" bindchange="radioChange"> <label class="radio" wx:for="{{items}}"> <radio value="{{item.name}}" checked="{{item.checked}}" color="#fff"/>{{item.value}} </label></radio-group> .wxss /* radio未选中时样式 */ radio .wx-radio-input{ border-radius: 3rpx; height: 26rpx; width: 26rpx; margin-top: -4rpx; /* 自定义样式.... */ } /* radio选中时样式 */ radio .wx-radio-input.wx-radio-input-checked::before{ background-color: #e02e24; border: 1rpx solid #e02e24; /* 自定义样式.... */ }
最新文章
- poj2186Popular Cows(Kosaraju算法--有向图的强连通分量的分解)
- 。net 添加或获取文件关联
- 数据库路由器 ICX
- 使用windows服务和MSMQ和进行日志管理(解决高并发问题)
- 二叉树单色路径最长&;&;穿珠子
- Android-取消GridView/ListView item被点击时的效果
- Aandroid Error之 新导入工程报Unable to resolve target &#39;android-18&#39;和R cannot be resolved
- 【Web】十步教你搭建完整免费的个人网站(花生壳+XAMPP+WordPress)
- Atitit.web三编程模型 Web Page Web Forms 和 MVC
- App上线Check List
- identity server4 证书
- idea找不到tools.jar下的内容的解决方法
- kettle连接oracle报错oracle.i18n.text.converter.CharacterConverter.OGS.getInstance(I)Loracle/i18n/text/converter/CharacterConverter
- Partition(hdu4651)2013 Multi-University Training Contest 5
- Python 进程池的异步方法
- 电话、地址、Email等常用正则表达式
- Java 单生产者消费者问题
- BZOJ5104 Fib数列(二次剩余+BSGS)
- QlikView图表显示同比数据
- PHP之string之str_repeat()函数使用
热门文章
- web前端(2)—— 前端技术介绍
- 转:敏捷开发之Scrum扫盲篇
- c函数指针
- 团队作业—预则立&;&;他山之石
- 微信小程序本地引用iconfont(阿里巴巴矢量图标库)
- Nginx的configure各项中文说明
- 部署tinyproxy代理服务
- 处理HTML5新标签的浏览器兼容问题
- Linux发展史-简简简易版
- raise ValueError(";Cannot convert {0!r} to Excel";.format(value))