微信小程序的多选改变样式_微信小程序修改checkbox和radio默认样式

1、checkbox

checkbox .wx-checkbox-input{

border-radius:50%;

width:20px;height:20px;

}

checkbox .wx-checkbox-input.wx-checkbox-input-checked{

border-color:#F0302F !important;

background:#F0302F !important;

}

checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{

border-radius:50%;

width:20px;

height:20px;

line-height:20px;

text-align:center;

font-size:15px;

color:#fff;

background:transparent;

transform:translate(-50%, -50%) scale(1);

-webkit-transform:translate(-50%, -50%) scale(1);

}

2、radio

/* 未选中的样式 */

radio .wx-radio-input{

border-radius:50%;

width:20px;height:20px;

}

/* 选中后 背景及勾 的样式 */

radio .wx-radio-input.wx-radio-input-checked{

border-color:#F0302F !important;

background:#F0302F !important;

}

radio .wx-radio-input.wx-radio-input-checked::before{

border-radius:50%;

width:20px;

height:20px;

line-height:20px;

text-align:center;

font-size:15px;

color:#fff;

background:transparent;

transform:translate(-50%, -50%) scale(1);

-webkit-transform:translate(-50%, -50%) scale(1);

}