微信小程序 改变radio、switch、滚动条、button默认样式

1.改变radio大小

/* 单选钮样式 */
radio {
  transform:scale(0.5);
}

2、改变switch大小

.wx-switch-input{width:42px !important;height:22px !important;}
.wx-switch-input::before{width:40px !important;height: 20px !important;}
.wx-switch-input::after{width: 18px !important;height: 18px !important;}

3、改变滚动条默认样式

::-webkit-scrollbar{
   width: 0px;
   height:0px;
}

4、去除button默认样式

1、使用::after 伪类选择器，因为button的边框样式是通过::after方式实现的，如果在button上定义边框就会出现两条边框线，所以我们可以使用::after的方式去覆盖默认值。

button::after {
  border: none;
}

2、还需要在将按钮背景色设置为白色，因为按钮默认背景色是灰色的。

button {
  background-color: #fff;
}

3、去掉/修改默认的圆角：

button {
  border-radius:0;
}

button {
 border-radius: 98rpx;
} 

例1：

<button class='btn1' open-type='openSetting'>
    <image class='btnImg' src='../../images/wechat.png'></image>
    <view>确定</view>
 </button>

.btn1 {
  width: 80%;
  margin-top: 20rpx;
  background-color: burlywood;
  color: white;
  border-radius: 98rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.btnImg {
  margin-right: 8rpx;
  width: 46rpx;
  height: 46rpx;
}

.btn1::after {
  border-radius: 98rpx;
  border: 0; 
}

效果图：

例2：

<button class='btn1' open-type='contact'>
    <image class='btnImg' src='../../images/客服.png'></image>
    <view>联系客服</view>
 </button>

  <button class='btn2' open-type='openSetting'>
    <image class='btnImg' src='../../images/设置.png'></image>
    <view>授权设置</view>
 </button>

.btn1{
  width: 200rpx;
  height: 200rpx;
  margin-top: 20rpx;
  background-color: white;
  color: #999999;
  border-radius: 0rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
}

.btnImg {
  width: 50rpx;
  height: 50rpx;
}

.btn1::after {
  border: 0; 
}

 .btn2 {
      width: 200rpx;
	  height: 200rpx;
	  margin-top: 20rpx;
	  background-color: white;
	  color: #999999;
	  border-radius: 0rpx;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  font-size: 30rpx;
 }

 .btn2::after {
  border: 0; 
}

效果图：

参考：https://www.jianshu.com/p/93d7104be420