微信小程序switch 样式重写

一、switch开关组件，在小程序中有固定的样式和大小

如果想自定义样式的话需要重写，重写样式如下：

.wx-switch-input {}

.wx-switch-input::before {}

.wx-switch-input::after {}

二、重写示例如下：

注意：border、box-shadow样式的重置，不然会视觉上有偏差

/******************switch效果********************/
.wx-switch-input {
  width: 35px !important;
  height: 18px !important;
  box-sizing: border-box;
  position: relative;
  border: 0px !important;
}

.wx-switch-input::before {
  width: 35px !important;
  height: 18px !important;
  background: #CCCCCC !important;
  border: 0px solid #CCCCCC !important;
  box-shadow: none !important;
  left: 0px;
  top: 0px;
}

.wx-switch-input::after {
  width: 16px !important;
  height: 16px !important;
  top: 1px !important;
  left: 0px !important;
  opacity: 1 !important;
  box-sizing: border-box;
  box-shadow: none !important;
  border: 0px !important;
}

更多：

 小程序Image组件长按识别支持的码

C# 中的可用类型_不可用类型_C#双问号_C#问号点_C# null不等于

C# 10新增功能_C# 10新增特性