收藏
评论

小程序更改checkbox和radio默认样式

1、checkbox


checkbox .wx-checkbox-input{

    border-radius:50%;

    width:20px;height:20px;

}
checkbox .wx-checkbox-input.wx-checkbox-input-checked{

    border-color:#F0302F !important;

    background:#F0302F !important;

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

    border-radius:50%;

    width:20px;

    height:20px;

    line-height:20px;

    text-align:center;

    font-size:15px;

    color:#fff;

    background:transparent;

    transform:translate(-50%, -50%) scale(1);

    -webkit-transform:translate(-50%, -50%) scale(1);

}



2、radio


radio .wx-radio-input{

    border-radius:50%;

    width:20px;height:20px;

}
radio .wx-radio-input.wx-radio-input-checked{

    border-color:#F0302F !important;

    background:#F0302F !important;

}
radio .wx-radio-input.wx-radio-input-checked::before{

    border-radius:50%;

    width:20px;

    height:20px;

    line-height:20px;

    text-align:center;

    font-size:15px;

    color:#fff;

    background:transparent;

    transform:translate(-50%, -50%) scale(1);

    -webkit-transform:translate(-50%, -50%) scale(1);

}



如果上面的代码对您有帮助,麻烦抖一抖小手点下赞,谢谢


最后一次编辑于  2018-06-29  (未经腾讯允许,不得转载)
复制链接收藏赞 24

14 个评论

  • baz
    baz
    2018-07-19

    .wx-checkbox-input 这是从哪找出来的?控制台我找好久没发现

    2018-07-19
    赞同 1
    回复 2
    • 疏影柏翠胭脂淡
      疏影柏翠胭脂淡
      2018-09-14

      +1  同想问楼主 怎么找到的

      2018-09-14
      回复
    • xiaoming
      xiaoming
      05-20

      同问,这些样式是怎么找到的?小程序没有公布组件的源码,大佬是怎么找到的?

      05-20
      回复
  • Pontus
    Pontus
    2018-07-02

    赞👍

    2018-07-02
    赞同
    回复
  • 钟情
    钟情
    2018-07-18

    如果还有一个绿色的选中色怎么办

    2018-07-18
    赞同
    回复 2
    • 黄飞林
      黄飞林
      2018-07-25

      把红的改成绿色

      2018-07-25
      回复
    • 钟情
      钟情
      2018-08-08回复黄飞林

      就是改不了

      2018-08-08
      1
      回复
  • 钟
    2018-11-23

    赞👍

    2018-11-23
    赞同
    回复
  • Last StarDust
    Last StarDust
    03-08

    很棒,成功修改颜色!

    03-08
    赞同
    回复
  • Vuex
    Vuex
    03-18

    我想说句,伪类那儿是改不了的。就是对勾那类名是失效


    03-18
    赞同
    回复
  • 徐来
    徐来
    05-14

    成功使用,多谢

    05-14
    赞同
    回复
  • 霞宝不想起床
    霞宝不想起床
    06-25

    不论你怎么找到的,此时此刻的我只想夸你,你真棒

    06-25
    赞同
    回复
  • Duō_rui mi
    Duō_rui mi
    06-26

    棒棒哒

    06-26
    赞同
    回复
  • 风
    07-03

    自定义组件直接加不行啊,要怎么做才可以添加上

    07-03
    赞同
    回复