在开发小程序的时候,使用到了iview的i-radio单选组件,ui上的单选按钮选中的状态是一个白色的圆点,而iview默认的是一个白色的√,然后调试查看,根本查不到样式。网上查找原因,然后得出以下方法:
## 第一种方法(这个针对mpvue无效,原生小程序的应该是有效的):
i-radio .wx-radio-input.wx-radio-input-checked::before {
border-radius: 50%;/* 圆角 */
width: 20rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
height: 20rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
font-size:0; /* 对勾大小 0 */
background: #fff;
}
这种方法使用之后发现完全没得效果。
第二种方法(有效):
/deep/:深入选择器
i-radio /deep/ .wx-radio-input.wx-radio-input-checked::before {
border-radius: 50%;/* 圆角 */
width: 20rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
height: 20rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
font-size:0; /* 对勾大小 0 */
background: #fff;
}
加入深入选择器(/deep/)之后就有效果了。