微信小程序开发之表单组件样式修改checkbox

在微信小程序开发中发现不可以直接修改表单样式，如：checkbox……

如要进行修改，需进行下列操作：

举个栗子：

若要修改这个checkbox的样式，则需要在wxss文件中进行修改

修改之前：

 进行样式修改（默认显示时）

.wx-checkbox-input{
  width: 30rpx !important;
  height: 30rpx !important;
  border-radius: 50% !important;
  border: 5rpx solid skyblue !important;
}

选中时：

 

/* 选中时的背景颜色 */
.box .wx-checkbox-input-checked{
  background-color: skyblue;
}
/* 选中时勾的颜色 */
.box .wx-checkbox-input-checked::before{
  color: white;
}

 

修改之后：

 

这里一定要给每个属性加上权重 !important ，否则不会生效。

另外在组件中修改，需要在组件中的 .js 里添加

options: {
    styleIsolation: "shared"
  },

为防止影响到其他组件的使用，还需要指定特定的对象类

这样就不会影响到其他相关组件的使用了