小程序checkbox复选框自定义多样式

星空下的西瓜地

已于 2023-02-28 16:23:47 修改

阅读量324

点赞数

文章标签： vue.js 前端 javascript 小程序

于 2023-02-28 16:14:41 首次发布

本文链接：https://blog.csdn.net/qq_38243173/article/details/129264003

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章提供了一种方法来解决小程序中复选框自定义样式不生效的困扰。通过在app.vue全局修改样式，或者在引用页面添加特定类名避免全局污染。示例代码展示了如何使用SCSS编写自定义的选中前后样式，以及如何覆盖默认的图标样式。

摘要由CSDN通过智能技术生成

hahah~你也是小程序复选框自定义样式不生效的同道中人嘛🤭

修改样式只能在app.vue里面修改！！！！！！

不想全局生效，就在外面套一层.custom-checkbox

然后在引用的页面***.vue，checkbox 外面一层标签上引进就好了 class='custom-checkbox'

<style lang="scss">
.custom-checkbox {
  /* 使用一层类名包裹避免全局污染，下面开始设置选中前的你要样式*/
  /*设置通用样式*/
  .universal_sty {
    border: none;
    width: 52rpx;
    height: 52rpx;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 100%;
  }

  /*//选中前的样式----------------------------------*/
  checkbox .wx-checkbox-input {
    background-image: url('./static/iconfont/choice_no.png'); /*替换为你要的图片样式*/
    @extend .universal_sty;
  }
  //选中前原本的图标样式-需要把它置空
  checkbox .wx-checkbox-input::before {
    font-size: 0rpx;
    background: transparent;
  }
  /*//选中后的背景样式---------------------------------*/
  checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    font-size: 0rpx;
    border: none !important;
    background-color: transparent !important;
    @extend .universal_sty;
  }

  /*选中后的图标样式，需要把它置空*/
  checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
    background-image: url('./static/iconfont/choice_much.png') !important;/*替换为你要的图片样式*/
    @extend .universal_sty;
  }
}
</style>