收藏
回答

微信小程序提供的checkbox如何修改样式?

打开调试器,checkbox是这样的,class是自己加的,看了很多帖子,样式都不生效。。。

回答关注问题邀请回答
收藏

4 个回答

  • 小高
    小高
    01-10

    .wx-checkbox-input .wx-checkbox-input-checked .wx-checkbox-input-checked::before

    01-10
    有用 2
    回复 1
    • 我们的哥哥呢
      我们的哥哥呢
      04-25
      有用😭您这个有用啊佬儿
      04-25
      回复
  • showms
    showms
    01-10

    f12,审查元素就可以知道默认的样式咋修改了

    01-10
    有用
    回复 5
    • 半截小诗
      半截小诗
      01-10
      我的就是我发的那个图片,很离谱,是不是因为我这个是插件的原因
      01-10
      回复
    • showms
      showms
      01-10回复半截小诗
      插件和外部样式貌似是隔离的,没去试过,复现问题的代码片段发出来看看https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
      01-10
      回复
    • 半截小诗
      半截小诗
      01-10回复showms
      https://developers.weixin.qq.com/s/uo6w96mr7iX3
      01-10
      回复
    • showms
      showms
      01-10回复半截小诗
      好像确实是修改checkbox默认样式的代码不能放自定义组件里面,放在外面page的wxss或者app.wxss倒是可以生效
      01-10
      回复
    • showms
      showms
      01-10回复showms
      wx-checkbox .wx-checkbox-input.wx-checkbox-input-checked {
          color: #fff !important;
          background-color: #3F72FF;
          border: 2rpx solid #3F72FF
      }
      wx-checkbox .wx-checkbox-input {
          /*margin-right: 10rpx;*/
          -webkit-appearance: none;
          appearance: none;
          outline: 0;
          text-indent: 0;
          border-radius: 50%;
          width: 50rpx;
          height: 50rpx;
          background-color: transparent;
          position: relative;
          border: 2rpx solid #fff;
          /*border-bottom: 50rpx solid #fff ;
          border-left: 50rpx solid transparent ;*/
          box-sizing: border-box;
      }
      /*钩大小*/
      wx-checkbox .wx-checkbox-input.wx-checkbox-input-checked:before {
          font-size: 36rpx;
      }
      01-10
      回复
  • 小黎
    小黎
    01-10

    你想修改成什么样子

    框框样式.wx-checkbox-input

    勾勾样式.wx-checkbox-input-checked:before

    01-10
    有用
    回复
  • 智能回答 智能回答 该问答由AI生成
    01-10
    有用
登录 后发表内容