微信小程序修改原生radio大小，选中按钮背景颜色

最新推荐文章于 2024-05-12 15:14:57 发布
最新推荐文章于 2024-05-12 15:14:57 发布
阅读量369 收藏 1
点赞数 1
文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38968222/article/details/137040156
版权

修改radio大小

在这里设置宽高是没有用的，所以换个思路用scale放大缩小

radio {
    transform: scale(0.7);
}

选中按钮背景色

文档提供的color是无法修改背景色的，所以同理我们可以用滤镜将绿色换为自己的主题色或者想要的颜色

radio {
    filter: hue-rotate(45deg);
}

效果演示
在这里插入图片描述
我这里换了个青色，你可以调整hue-rotate参数换成你想要的颜色

阿莫桑
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解微信小程序Radio选中样式切换
12-29
详解微信小程序Radio选中样式切换 本篇文章主要讲解在微信小程序中如何根据Radio选中来切换样式。效果如下： 原理主要是通过判断一个radio-group中哪个被选中，就让它加上一个“active”的样式。 代码如下： &lt...
微信小程序 radio使用及默认样式修改
weixin_45689786的博客
03-20 1166
微信小程序 radio使用及默认样式修改
微信小程序 修改radio的样式为环形
weixin_53853031的博客
08-24 898
微信小程序 修改radio样式
微信小程序改变原生radio的样式
一口吃个胖子乐的的博客
04-18 344
--------wx.ml------ <view class="page__bd"> <view class="section section_gap"> <radio-group class="radio-group" bindchange="radioChange"> <radio ...
微信小程序radio单独使用选中后再次点击无法取消
weixin_44622241的博客
05-28 763
微信小程序点选按钮选中后无法取消
小程序radio 自定样式的坑（选中颜色，背景）
wangsq-web的博客
07-09 3万+
改变小程序的radio 原生样式，与checkbox 不同 再复选的时候可以用 checkbox .wx-checkbox-input.wx-checkbox-input-checked{ background: red } 来改变复选框选中的背景色 但是在单选radio 的的时候 radio .wx-radio-input.wx-radio-input-checked{ ...
微信小程序——语法篇
热门推荐
官方推荐
09-10 4万+
掌握小程序语法快速上手实操一款小程序吧！
uniapp做微信小程序，自定义checkbox和radio的样式
liuye066的专栏
07-12 2706
用uniapp做个微信小程序，其中有用到自定义checkbox和radio的样式；自定义checkbox。
微信小程序radio单选框如何修改宽高及选中样式
weixin_45850768的博客
07-31 3608
之前写过关于多选框设置样式的办法，其实与单选框设置的方法一样，唯一不同的是，在css样式里，/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */的下面定义的css需要加上!important才会生效，意思是本css拥有最高权重，但是多选框就不用，挺逗的。 关于多选框的设置方法：微信小程序checkbox多选框如何修改宽高及选中样式 <radio-group @change="radioChange"> <label> <radio value="1
微信小程序 修改默认单选，多选按钮样式
qq_48104836的博客
11-24 926
修改默认单选多选样式
微信小程序单选radio及多选checkbox按钮用法示例
11-28
本文实例讲述了微信小程序单选radio及多选checkbox按钮用法。分享给大家供大家参考，具体如下： 1.单选：radio 实例： js: Page({ data : { radioId:"", loves:[ {id:1, name:"跑步" ,checked : 'true'}, {id:2, ...
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
08-28
主要介绍了微信小程序实现点击按钮修改view标签背景颜色功能,涉及微信小程序事件响应及数值运算实现动态设置view背景色样式的相关操作技巧,需要的朋友可以参考下
微信小程序实现点击按钮后修改颜色
10-15
主要介绍了微信小程序实现点击按钮后修改颜色,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
基于微信小程序的预约挂号系统（源码）
最新发布
u013749113的博客
05-12 954
逻辑层和视图层。Java主要采用CORBA技术和安全模型，可以在互联网应用的数据保护。本系统基于Web服务模式，是一个适用于Internet环境下的模型结构。
微信小程序里的地理导航：百度地图API与路径规划实战
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-09 828
通过本文，您已掌握了在微信小程序中集成百度地图SDK的基础知识，实现了地点展示和路径规划功能。但探索永无止境，比如如何实现更复杂的地图交互、如何进一步优化地图加载速度等，都是值得深入探讨的话题。期待您在实践中不断挖掘百度地图API的潜力，并分享您的宝贵经验和创新思路。在微信小程序的开发旅程中，让地图成为连接用户与服务的桥梁，开启更多可能。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7。
微信小程序如何使用svg矢量图标
weixin_45465881的博客
05-06 960
在微信小程序中，经常会用到小图标来装饰界面，我们常用的方法就是引用第三方的图标，但会存在收费或者找不到合适的图标，这时候我建议可以自行编写svg图标代码，就可以随心所欲的使用。具体的效果图如下：那么在微信小程序中，具体怎样引用自定义的图标的呢，大概的步骤我浅浅的分享如下：</
基于微信小程序+JAVA Springboot 实现的【英语学习交流平台】小程序+后台管理系统 （内附设计LW + PPT+ 源码+ 演示视频 下载）
代码互助协会的博客
05-09 899
英语学习交流平台小程序。文章详细介绍了英语学习交流平台微信小程序的开发过程，旨在通过信息技术提升英语学习管理的效率和质量。文章从系统分析、设计、实现到测试，全面阐述了该小程序的构建和功能特点。 系统分析阶段，文章讨论了技术、经济和操作的可行性，确保了项目的顺利进行。系统设计部分，重点介绍了功能设计和数据库设计，为后续开发奠定了基础。文章还详细介绍了系统概要设计，包括系统结构和数据库实体，为理解系统提供了蓝图。 在系统详细实现部分，文章展示了管理员和用户两个角色的功能实现，如用户信息管理、每日打卡、学习资源管
微信小程序修改按钮框的大小和颜色
06-08
要修改微信小程序中按钮框的大小和颜色，可以通过修改按钮组件的样式来实现。 具体步骤如下： 1. 在小程序页面的 wxss 文件中，添加样式设置按钮框的大小和颜色。例如： ``` button { border: 2px solid #333; /* 设置按钮边框为2像素宽度的实线，颜色为黑色 */ border-radius: 20rpx; /* 设置按钮边框的圆角半径为20像素 */ width: 200rpx; /* 设置按钮宽度为200像素 */ height: 80rpx; /* 设置按钮高度为80像素 */ background-color: #fff; /* 设置按钮背景颜色为白色 */ color: #333; /* 设置按钮文字颜色为黑色 */ } ``` 2. 在小程序页面的 wxml 文件中，使用 button 组件，并为其添加样式类。例如： ``` <button class="my-button">按钮</button> ``` 这样，就可以在小程序中修改按钮框的大小和颜色了。需要注意的是，样式单位使用的是 rpx，表示可自适应的像素，具体大小会根据屏幕宽度进行调整，因此在不同的设备上显示效果可能会不同。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值