在做小程序的过程中,就是用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,但那个太麻烦了,我就将修改默认样式的这个方法,贴出来分享给大家。
「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」