微信小程序如何调整checkbox和radios选择框的大小和样式_微信小程序radio 变小

目录

修改选中框大小

修改Checkbox样式

修改Radio样式 

修改选中框大小

直接使用width和height调整checkbox和radios选择框的大小是无效的，简单的调整大小可以通过修改transform值，如下所示：

.wxss

.fill-checkbox{
  transform: scale(0.5,0.5);
}

scale参数分别为在长度和宽度上进行缩放的倍数。 

针对复杂样式的修改，wx提供了checkbox和radio勾选前、勾选后边框的样式修改方式，以及修改打钩样式的方式。

修改Checkbox样式

.fill-checkbox .wx-checkbox-input修改checkbox勾选前样式，直接使用css语法可修改，width和height有效。

.fill-checkbox .wx-checkbox-input.wx-checkbox-input-checked修改checkbox勾选后样式，直接使用css语法可修改，width和height有效。

.fill-checkbox .wx-checkbox-input.wx-checkbox-input-checked::before修改打勾的样式。

上述.fill-checkbox为checkbox的class类型，用于选中指定的checkbox。

.fill-checkbox .wx-checkbox-input {
  border-color:green 
}
.fill-che