小程序组件样式

简介

小程序中组件的调整，大部分都是通过官方文档进行查看的。但是有时候官方文档没有，就会选择重写一个组件，结果费时费力。其实很多组件的样式还是可以修改的。

组件

button

/* 按钮颜色，内部文本定位调整  */ 
.app-float{
    position: absolute;
    right:0rpx;
    bottom:300rpx;
    width: 72rpx;
    height:72rpx;
    padding-top:10rpx;
    padding-left:0rpx;
    padding-right:0rpx;
    line-height: 28rpx;
    font-size: 22rpx;
    background: #8ECFFF;
    box-shadow: 0 3px 6px 0 rgba(78,179,255,0.50);
    border-radius: 4px;
    color:#ffffff;
}
/* 去掉外边框  */ 
.app-float::after{
    border: none;
}

checkbox

/*  重写 checkbox 样式  */ 
checkbox   .wx-checkbox-input  { 
    border-radius :   50 % ; 
    width :   40 rpx ; 
    height :   40 rpx ; 
} 
checkbox   .wx-checkbox-input .wx-checkbox-input-checked  { 
    border :  none ; 
    background :  red ; 
} 
checkbox   .wx-checkbox-input .wx-checkbox-input-checked ::before  { 
    border-radius :   50 % ; 
    width :   40 rpx ; 
    height :   40 rpx ; 
    line-height :   40 rpx ; 
    text-align :  center ; 
    font-size : 30 rpx ; 
    color : #fff ; 
    background :  transparent ; 
    transform : translate(- 50 %, - 50 %)   scale( 1 ) ; 
    -webkit-transform : translate(- 50 %, - 50 %)   scale( 1 ) ; 
} 

radio

/*  重写 radio 样式  */ 
radio   .wx-radio-input  { 
    border-radius :   50 % ; 
    width :   40 rpx ; 
    height :   40 rpx ; 
} 
radio   .wx-radio-input .wx-radio-input-checked  { 
    border :  none ; 
    background :  red ; 
} 
radio   .wx-radio-input .wx-radio-input-checked ::before  { 
    border-radius :   50 % ; 
    width :   40 rpx ; 
    height :   40 rpx ; 
    line-height :   40 rpx ; 
    text-align :  center ; 
    font-size : 30 rpx ; 
    color : #fff ; 
    background :  transparent ; 
    transform : translate(- 50 %, - 50 %)   scale( 1 ) ; 
    -webkit-transform : translate(- 50 %, - 50 %)   scale( 1 ) ; 
}