微信小程序switch样式修改

微信小程序结合了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;
}

微信小程序switch样式修改相关推荐

微信小程序组件样式修改
微信小程序checkbox.radio.button.switch.swiper组件样式(CSS)修改 1.checkbox样式修改 /*checkbox整体大小*/ checkbox {width: ...
微信小程序switch样式调整
修改方案一: 参考:https://blog.csdn.net/littlebeargreat/article/details/79130305 /*swtich整体大小*/ .wx-switch-i ...
记录：微信小程序Switch样式调整
/*swtich整体大小*/ .wx-switch-input {width: 96px !important;height: 56px !important;border-color: #eee; ...
微信会员卡html修改样式模板,微信小程序 JS动态修改样式的实现代码
微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...
java switch小程序,微信小程序 switch组件详解及简单实例
微信小程序switch 相关文章: 实现效果图: 开关选择器属性名类型默认值说明 checked Boolean false 是否选中 disabled Boolean false 是否禁用 ...
微信小程序text设置高度_微信小程序字体样式的设置
知识点: 1.常用字体样式属性 2.利用style和class 设置字体样式 3.在app.wxss 和 index.wxss中定义样式常用字体属性: 举列: 项目目录: 运行结果: 在index. ...
微信小程序页面上面的名字怎么改_微信小程序取名|如何修改名字|取名规则！...
原标题:微信小程序取名|如何修改名字|取名规则! 在过去的建站使其曾有「域名比老板重要」的说法,而现在,微信小程序的名字也至关重要,拥有一个好的名字,将能带来众多的流量.小程序名字虽然只是个简单的符号 ...
微信小程序优惠券样式
微信小程序优惠券样式 <view class="coupon-view"><view class="coupon-left"></ ...
微信小程序CSS样式图片闪烁
微信小程序CSS样式图片闪烁微信小程序直接用CSS样式让图片闪烁起来!!! 废话不多说!直接上代码 // 这是设置小程序WXSS页面 .shanshuo{-webkit-animation: twi ...
微信小程序之Js修改元素样式
微信小程序和普通的前端开发有很多不同. 后者修改样式js可以操作DOM,即 document.getElementById(id).style.property=new style 但是微信的js是没 ...

微信小程序switch样式修改

微信小程序switch样式修改相关推荐

最新文章

热门文章