2017-12-09 分类：小程序 作者：梦想霞 阅读（8600）
在做小程序的过程中，就是用radio和checkbox做选择功能的时候，比较简单，比自定义要容易很多，但也遇到一个问题，就是默认样式，一直找不到方法修改，做出来的样子很丑，不是自己想要的效果。
今天终于做出来了，找到了修改默认样式的方法，现在就来看看是怎么做的呢？
1、部分前台wxml代码如下：
2、重点wxss样式如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | .attr_value { float: left; margin-right:20rpx; position: relative; } .radio_label{ display: block; padding:0 24rpx; height: 40rpx; line-height: 40rpx; } /*radio默认样式重置*/ radio { box-sizing: border-box; background: none; position: absolute; width: 100%; height: 100%; top:0; left:0; } radio .wx-radio-input { margin-right: 15rpx; position: absolute; width: 100%; height: 100%; top:0; left:0; background: none; border-radius: 6rpx; box-sizing: border-box; } radio .wx-radio-input.wx-radio-input-checked { background-color:transparent; border-color:#FF2150; overflow: hidden; box-sizing: border-box; } radio .wx-radio-input.wx-radio-input-checked::before { content: '\e60d'; font-family:"iconfont" !important; font-size:30rpx; color: #FF2150; top:auto; left:auto; right:-4rpx; bottom:-4rpx; transform:translate(0, 0) scale(1); -webkit-transform:translate(0, 0) scale(1); } /*radio默认样式重置*/ |
修改前的默认radio效果如下：
修改后的radio效果如下：
radio .wx-radio-input.wx-radio-input-checked::before 中的 content: '\e60d' 我用的是阿里图标代替了默认的图标。
修改后的radio样式是不是漂亮多了呢？这个写css样式不难，相信做前端的大家都会写，重点是找不到默认css的标签，只要找到了，就很好做了。百度了几次，也都是让自定义，模仿radio，但那个太麻烦了，我就将修改默认样式的这个方法，贴出来分享给大家。
「两年博客，如果觉得我的文章对您有用，请帮助本站成长」
这个网站就有点厉害了
评：前端学习资料大全，最全面的互联网学习资源教程来了一次又一次，总是情不自已！
评：啊，我怀宝宝了，不做前端了，即将转行做全职妈妈了Hello There! Have A Good Day!
评：支付宝再投“10个亿”，蚂蚁会员有机会获得最高188元圣诞红包哦！Ye ! This Is A Good Blog!
评：支付宝再投“10个亿”，蚂蚁会员有机会获得最高188元圣诞红包哦！人生如白驹过隙，每天浏览几篇博客，学习学习，充实自己！
评：支付宝再投“10个亿”，蚂蚁会员有机会获得最高188元圣诞红包哦！来看看，因为，总能学到东西！
评：支付宝再投“10个亿”，蚂蚁会员有机会获得最高188元圣诞红包哦！
