uniapp radio按钮组修改样式,自定义radio样式

13天前   阅读:208   分类:前端    标签: uni-app

uniapp组件radio按钮官方的样式不好看,我们可以自己定义自己的样式,根据我们的主题样式来。

1、页面代码:

<view>
         <view>
                   课程
         </view>
         <radio-group :name="raido" >
                   <label>
                            <radio value="语文"/><text>语文</text>
                   </label>
                   <label>
                            <radio value="数学"/><text>数学</text>
                   </label>
                   <label>
                            <radio value="英语"/><text>英语</text>
                   </label>
         </radio-group>
</view>

2、自定义样式,以下根据需求修改

<style>
          /* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */
         .radiobox radio .wx-radio-input.wx-radio-input-checked{
                   background: #3c77ed;
                   border: 1px solid #3c77ed;
         }
         /* 选中后的 对勾样式 (白色对勾 可根据UI需求自己修改) */
         .radiobox radio .wx-radio-input.wx-radio-input-checked::before{
                  
</style>


【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年99元

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/578.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

上一篇:没有更多了文章

下一篇: TP5搜索分页

文章评论(0)

登录
简忆博客壁纸 头像

简忆博客
仕而优则学,学而优则仕。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×