近日在做小程序选项框时,发现小程序默认的样式是自带绿色的,在网上也找了各种方法去修改他默认的选中样式。找了多种资料,发现网上的代码样式只能修改单选框的,修改多选框的样式并不起效。
1. 在做单选框时直接用的网上的样式是可以解决的,贴下代码:
radio {
width: 40rpx;
}
/* 单选框未选中 */
radio .wx-radio-input {
width: 30rpx;
height: 30rpx;
border-radius: 50%;
}
/* 单选框选中后对勾样式 */
radio .wx-radio-input.wx-radio-input-checked::before{
border-radius: 50%;
width: 55rpx;
height: 55rpx;
line-height: 55rpx;
text-align: center;
font-size: 30rpx;
color:#fff;
background-color: #B30000;
border-color:#B30000;
}
更改后的效果如下:
2. 多选框:(网上的修改的css样式并不起效,于是去查了官网文档)
看上图,官网文档上已给出了可以绑定color这个属性,于是乎,问题就很好解决了。贴下图解决方法:
首先我们先绑定color属性:
再到data中绑定:
最后 就修改完成了