小程序switch开关按钮和单选radio按钮自定义样式

1.switch

/*switch整体的大小以及背景色（选中时候的颜色 true）*/

switch .wx-switch-input{}

/*未选中时的颜色（false）*/
switch .wx-switch-input::before{}
/*中间的小圆球样式,可以设置border-radius变成小方块*/
 switch .wx-switch-input::after{}
注：如果仅仅改变大小可试用 zoom:0.2

2.radio

/*radio未选中时样式 */
radio .wx-radio-input{}
/* 选中后的 背景样式 */
radio .wx-radio-input.wx-radio-input-checked{}
/* 选中后的 对勾样式 */
radio .wx-radio-input.wx-radio-input-checked::before{
content:' ',/*去掉对号*/}

radio { transform:scale(0.5); }（仅仅改变大小）

3.checkbox

/*checkbox未选中时样式 */
checkbox .wx-checkbox-input{}
/* 选中后的 背景样式 */
checkbox  .wx-checkbox-input.wx-checkbox-input-checked{}
/* 选中后的 对勾样式 */
checkbox .wx-checkbox-input.wx-checkbox.input-checked::before{

content:' ',/*去掉对号*/}

注意：在每个属性后面要加!important，或switch .wx-switch-input::before{}，这样写，写在当前page的css,覆盖原本的样式