微信小程序：修改单选radio大小样式

通过scale将其缩小

<radio style="transform:scale(0.8)" checked="true" value="true"></radio>

修改样式

/* 未选中的样式 */
radio .wx-radio-input{border-radius:50%;width:20px;height:20px;
}/* 选中后 背景及勾 的样式 */
radio .wx-radio-input.wx-radio-input-checked{border-color:#F0302F !important;background:#F0302F !important;
}radio .wx-radio-input.wx-radio-input-checked::before{border-radius:50%;width:20px;height:20px;line-height:20px;text-align:center;font-size:15px;color:#fff;background:transparent;transform:translate(-50%, -50%) scale(1);-webkit-transform:translate(-50%, -50%) scale(1);
}

参考
微信小程序修改默认radio大小样式
小程序更改checkbox和radio默认样式

微信小程序：修改单选radio大小样式相关推荐

【微信小程序】checkbox,radio的样式修改
一.checkbox样式修改默认勾选与未勾选样式 wxml <checkbox color="#fff" value="{{id}}" checked= ...
微信小程序——好看的radio单选项框，wxml里列表中遍历数组获取id传回给js页面
微信小程序--好看的radio单选项框第一种效果图如下: .wxss代码: .view_container {display: flex;flex-direction: row;justify-c ...
微信小程序修改顶部电量时间的颜色
微信小程序修改顶部电量时间的颜色 onShow: function () {wx.setNavigationBarColor({frontColor: '#ffffff',backgroundC ...
微信小程序：限制上传图片大小
微信小程序:限制上传图片大小 page({data:{Size:2*1024*1024,//定义大小}, )} //限制上传图片大小(2M)for(let i=0;i<res.tempFiles ...
微信小程序实现单选、全选功能
前言概述本文介绍微信小程序实现单选.全选功能,效果如下: 实现过程 1.先实现页面效果,文件*.wxml和*.wxss代码如下: <view class="container&quo ...
微信小程序动态计算图片大小
微信小程序动态计算图片大小方法一使用图片的mode属性手动计算给图片绑定事件bind:load,回调函数名为onImgLoad 编写回调函数,width为340是图片容器的宽度 method ...
微信小程序通讯录功能；uni-app微信小程序通讯录单选；uni-app微信小程序通讯录多选；uni-app微信小程序通讯录好友功能；uni-indexed-list使用；通讯录高度修改；
介绍:项目使用的是uni-app做的微信小程序:uni-app里原来就用一个组件uni-indexed-list,是用来做通讯录的:可以直接看官方案例也就是hello-uniapp-master下的导 ...
微信小程序界面设计入门课程-样式wxss中使用css课程-字体-font-size字体大小
font-size字体大小微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua 基础语法有能力管理文 ...
微信小程序——修改field输入框内文字颜色和背景图透明度调整
一.修改field输入框内的文字的颜色我用的vant组件,所以直接在页面写的样式,先上代码 <van-field custom-style="-webkit-text-fill-co ...

微信小程序：修改单选radio大小样式

微信小程序：修改单选radio大小样式相关推荐

最新文章

热门文章