微信小程序修改radio样式

「爱情、让人受尽委屈。」 2024-04-07 10:25 72阅读 0赞

#### 案例： ####

页面代码![在这里插入图片描述][4210c2d9559c4061ab2971588a3a4456.png]  
样式如下：  
(前）![改前][415288a633ad4465869a0b66eff40292.png]  
(后）![改后][59f717cc7f994de182619f204a378f21.png]

#### 关键wxss： ####

/* 单选按钮样式*/
    radio .wx-radio-input {
        
        width: 40rpx;
        height: 40rpx;
        border: 4rpx solid #8C8C8C;/* 外圈边框，默认灰色，即未选中状态*/
        border-radius: 50%;
        background: none;
      }
      /*单选按钮选中后内部样式*/
      radio .wx-radio-input.wx-radio-input-checked {
        
        border: 4rpx solid #8C8C8C !important;/* 外圈边框，选中状态颜色*/
        background-color: white !important;/* 外圈边框与内圈实心圆间的内容的颜色，不设置就默认是上面的绿色*/
      }
      /*单选按钮选中后内部中心*/
      radio .wx-radio-input.wx-radio-input-checked::before {
        
        width: 60%;
        height: 60%;
        background: red;/* 内圈实心圆选中状态颜色*/
        border-radius: 50%;
        content: '';/* 隐藏✔️*/
        transform: translate(-50%, -50%) scale(1);
        -webkit-transform: translate(-50%, -50%) scale(1);
      }

[4210c2d9559c4061ab2971588a3a4456.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/b6cb3e7e7f494ec2aa1d3c1fe4d9222c.png
[415288a633ad4465869a0b66eff40292.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/46209f08724b4b309e3a7a505e4bda79.png
[59f717cc7f994de182619f204a378f21.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/148b22613f4e4b54bdfc6608f885bbe4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，72人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序修改radio样式

案例：页面代码![在这里插入图片描述][4210c2d9559c4061ab2971588a3a4456.png] 样式如下： (前）![改前][415288a

「爱情、让人受尽委屈。」/ 2024年04月07日 10:25/ 0 赞/ 72 阅读

相关微信小程序修改radio的默认样式和图标

/ 选中后的背景样式 / radio .wx-radio-input.wx-radio-input-checked { border-color:

- 日理万妓/ 2023年06月18日 15:55/ 0 赞/ 16 阅读

相关微信小程序–样式

微信小程序–样式 1.布局小技巧 1.1 通过添加空标签，实现内容之间的间隔 <view class='height_20'></view>

本是古典何须时尚/ 2023年02月19日 12:29/ 0 赞/ 15 阅读

相关小程序修改默认的radio样式

1、wxml： <radio-group class="radio-group" bindchange="radioChange"> <vie

不念不忘少年蓝@/ 2022年11月22日 10:13/ 0 赞/ 228 阅读

相关【微信小程序】自定义radio的默认样式和图标

注意： [components使用radio原生组件修改样式无效][components_radio] 代码片段： /radio未选中时样式 / radi

落日映苍穹つ/ 2022年11月09日 00:56/ 0 赞/ 480 阅读

相关微信小程序的样式

微信小程序中css的使用技巧总结这篇文章介绍了最近很火的微信小程序中css的使用技巧总结，有需要的同学可以参考一下本文微信小程序 css使用技巧 1:用纯CSS创

本是古典何须时尚/ 2022年07月13日 14:00/ 0 赞/ 304 阅读

相关微信小程序点击控件修改样式

通常，页面呈现的效果，我们直接在css中进行，可是有时我们需要进行通过一系列操作比如点击后，要使得样式进行改变。我们知道微信小程序也可以使用一些伪类进行这类操作样式的改变，比如

落日映苍穹つ/ 2022年05月29日 01:37/ 0 赞/ 766 阅读

相关微信小程序点击控件修改样式

微信小程序中不支持直接操作dom，要实现这种效果，我们需要通过设置data，然后利用数据和界面的双向绑定来实现它。第一步：在wxss中定义被点击和未被点击的样式，如下：

电玩女神/ 2022年05月25日 08:14/ 0 赞/ 245 阅读

相关微信小程序——修改radio组件的大小

radio组件的样式大小太大了，和我的文字大小不匹配，看起来很难看 ![这里写图片描述][70] 于是给radio设置了width和 height ，然而并不起作用

系统管理员/ 2022年05月24日 13:59/ 0 赞/ 285 阅读

相关微信小程序：修改checkbox/radio样式

修改checkbox样式使用mpvue的时候，这里的`checkbox`改成你用在`checkbox`元素上面的类 / 重写 checkbox 样式 /

清疚/ 2022年01月11日 23:59/ 0 赞/ 481 阅读