公告列表
公告列表
收藏
回答

checkbox的形状怎么修改？

checkbox的形状


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

4 个回答

  • 八九
    八九
    2023-06-05
    微信小程序有提供了CSS属性，你可以在文档或者小程序debug看下

1、未选中的背景样式：wx-checkbox-input
2、选中后的背景样式 ： wx-checkbox-input.wx-checkbox-input-checked
3、选中后的勾子的样式：wx-checkbox-input.wx-checkbox-input-checked::before

/* 未选中的背景样式 */
checkbox .wx-checkbox-input{
  width: 40rpx; 
  height: 40rpx; 
  border-radius: 50%;
}

/* 选中后的背景样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
  border: none;
  background: #37C674;
}

/* 选中后的勾子样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  border-radius: 50%;
  text-align: center;
  font-size:32rpx; 
  color:#FFF; 
  background: transparent;
  transform:translate(-50%, -50%) scale(1);
  -webkit-transform:translate(-50%, -50%) scale(1);
}
    2023-06-05
    有用 10
    回复 4
    • 清晨的阳光
      清晨的阳光
      2023-09-08
      你好, 我将这些样式复制到代码中确实生效了[赞], 但是我在开发工具中运行调试时看不到这些样式, 无法调试(修改), 是我开发工具的问题吗, 你是怎么找到这些样式的?
      2023-09-08
      赞
      回复
    • 花间一壶酒
      花间一壶酒
      2023-09-27回复清晨的阳光
      网页官方文档-检查，去网页styles里面找
      2023-09-27
      赞
      回复
    • 陈龙华
      陈龙华
      2023-11-24
      /* 选中后的背景样式 */
      checkbox .wx-checkbox-input.wx-checkbox-input-checked {
        border: solid 1px #37C674;
        background: #37C674;
      }


      选中样式增加边框，效果更丝滑
      2023-11-24
      赞
      回复
    • 666
      666
      2023-12-20
      好使都中
      2023-12-20
      赞 1
      回复
  • 彭彭彭气氛刚好
    彭彭彭气氛刚好
    03-26

    skyline 模式下 设置不生效

    03-26
    有用
    回复 1
    • July
      July
      06-17
      请问解决了吗?
      06-17
      赞
      回复
  • 海中央
    海中央
    01-10

    在page页面下的wxss，生效不了的。可以去app.wxss里面填写

    01-10
    有用
    回复
  • 发飙的蜗牛
    发飙的蜗牛
    2023-06-05

    修改css初试样式就可以

    2023-06-05
    有用
    回复
请 登录 后发表内容
相关问题
相关文档