一个梦想成为web前端开发人员的个人博客网站
当前位置: 前端学习 > 小程序 > 小程序radio默认样式更改

小程序radio默认样式更改

2017-12-09 分类：小程序 作者：梦想霞 阅读（11358）

在做小程序的过程中，就是用radio和checkbox做选择功能的时候，比较简单，比自定义要容易很多，但也遇到一个问题，就是默认样式，一直找不到方法修改，做出来的样子很丑，不是自己想要的效果。

今天终于做出来了，找到了修改默认样式的方法，现在就来看看是怎么做的呢？

1、部分前台wxml代码如下：

1
<label class="radio_label">颜色</label>

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效果如下：

小程序radio重置默认样式

radio .wx-radio-input.wx-radio-input-checked::before 中的 content: '\e60d' 我用的是阿里图标代替了默认的图标。

修改后的radio样式是不是漂亮多了呢？这个写css样式不难，相信做前端的大家都会写，重点是找不到默认css的标签，只要找到了，就很好做了。百度了几次，也都是让自定义，模仿radio，但那个太麻烦了，我就将修改默认样式的这个方法，贴出来分享给大家。

「三年博客，如果觉得我的文章对您有用，请帮助本站成长」

赞(5) 打赏

支付宝
微信
赏 5

支付宝
微信
标签：

上一篇：

下一篇：

你可能感兴趣

博客简介

沉鱼落雁，闭月羞花，一个妖娆多姿梦想成为代码女神的前端个人网站分享自己程序人生，欢迎大家一起交流分享前端开发技术经验，更多web前端开发教程，可关注 - 唯品秀前端技术博客

最近更新

随机文章

热门标签

网站 搜索引擎 唯品秀 博客 前端 人生 个人博客 wordpress主题 wordpress web前端开发 jquery append jquery ajax jquery img下边距 https html5新增标签 html5 div+css css3媒介查询 css3 checkbox ajax实例 2016 2015

精彩评论

服务热线：
 173xxxx7240

 QQ在线交流

点击这里给我发消息
点击这里给我发消息

 旺旺在线

点击这里给我发消息
点击这里给我发消息