css3实现对radio和checkbox的美化

一,如何隐藏小程序中的很粗的滚动条,实现页面的美化?
 
tit: 在开发小程序的过程中,无论是横向或者纵向当产生滚动条时,系统默认的滚动条会很粗,效果展示十分难看,我们可以通过设置如下wxss代码实现滚动条的美化。
 
方法一:
::-webkit-scrollbar {
    display:none;
}
 
方法二:
::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

 

二,如何改变小程序单选/复选框的样式?
 
tit:  在开发时,很多情况下我们需要使用单选/复选框,但是我们发现单选复选框的样式并不是我们想要的样式,我们可以通过如下设置实现wxss自定义单选/复选样式的修改。
 
radio:
/* 未选中的背景样式*/
radio .wx-radio-input {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
}
/* 选中后的背景样式*/
radio .wx-radio-input.wx-radio-input-checked {
    background-color: #16cc80;
}
radio .wx-radio-input.wx-radio-input-checked::before {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    text-align: center;
    line-height:  40rpx;
    font-size:  30rpx;
    color: #fff;
    background-color: transparent;
    transform: translate(-50%,-50%) scale(1);
    -webkit-transform: translate(-50%,-50%) scale(1);
}

checkbox:

/* 未选中的背景样式*/
checkbox .wx-checkbox-input {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
}
/* 选中后的背景样式*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    background-color: #16cc80;
}
/*选中状态对勾的样式*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    text-align: center;
    line-height:  40rpx;
    font-size:  30rpx;
    color: #fff;
    background-color: transparent;
    transform: translate(-50%,-50%) scale(1);
    -webkit-transform: translate(-50%,-50%) scale(1);
}

 

posted @ 2018-07-04 22:43  狗尾草的博客  阅读(1077)  评论(0编辑  收藏  举报