一、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;
}
更多: