uni-app 微信小程序修改radio样式

爱吃鱼的小怪兽丶

已于 2024-03-06 10:55:09 修改

阅读量601

点赞数 2

文章标签： uni-app 微信小程序 vue.js 前端 javascript 笔记小程序

于 2024-03-01 10:29:57 首次发布

本文链接：https://blog.csdn.net/L807301075/article/details/136388874

版权

官网原样式：

 <radio-group>
      <view class="ds-fx ai-c">
            <radio :checked="true" />
            <text class="ml-10">默认</text>
       </view>
</radio-group>

修改后样式：

我这边使用的是scss语法，使用scoped避免影响到其它页面：

<style lang="scss" scoped>
/* 未选中时 */
:deep(radio .wx-radio-input) {
  border-radius: 50%;
  width: 30rpx;
  height: 30rpx;
}
/* 隐藏背景颜色，修改盒子为怪异盒模型 */
:deep(radio .wx-radio-input.wx-radio-input-checked) {
  background: none !important;
  box-sizing: border-box;
  border: 8rpx solid #409eff !important;
}
/* 隐藏选择后的打勾 */
:deep(radio .wx-radio-input.wx-radio-input-checked::before) {
  display: none !important;
}
</style>