微信小程序结合了H5、自有组件和原生组件,所以有很多地方不能像普通H5一样对待。
对于表单组件switch,直接修改样式不生效,可以使用.wx-switch-input
进行设置。
switch开关组件由于不能靠简单的input实现,所以还需要::before
和::after
分别设置覆盖背景和开关按钮(仅可设置部分样式)。
具体代码如下:
.wx-switch-input {
width: 102rpx !important;
height: 62rpx !important;
background: #ff9950 !important;
border: #ff9950 !important;
}
.wx-switch-input::before {
width: 100rpx !important;
height: 62rpx !important;
border: 1px solid #ff9950;
}
.wx-switch-input::after {
width: 62rpx !important;
height: 62rpx !important;
}