当前位置：网站首页>Wechat applet switch style rewriting

Wechat applet switch style rewriting

2022-06-13 02:55:00 【Tianma 3798】

One 、switch Switch assembly , There are fixed styles and sizes in the applet

If you want to customize the style, you need to rewrite , The rewrite style is as follows ：

.wx-switch-input {}

.wx-switch-input::before {}

.wx-switch-input::after {}

Two 、 The rewrite example is as follows ：

Be careful ：border、box-shadow Style reset , Otherwise, there will be visual deviation

/******************switch effect ********************/
.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;
}