多选框
<checkbox-group> <label> <checkbox></checkbox> </label> </checkbox-group>
checkbox .wx-checkbox-input { width: 34rpx; height: 34rpx; border-radius: 50%; } /*checkbox选中后样式 */ checkbox .wx-checkbox-input.wx-checkbox-input-checked { background: #0394F0; border-color:#0394F0; } /*checkbox选中后图标样式 */ checkbox .wx-checkbox-input.wx-checkbox-input-checked::before { width: 20rpx; height: 20rpx; line-height: 20rpx; text-align: center; font-size: 22rpx; color: #fff; background: transparent; transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); }
单选框
<radio-group @change="radioChange"> <label> <radio value="1" :checked="true" />是 </label> <label> <radio value="0" :checked="false" />否 </label> </radio-group>
/*radio未选中时样式 */ radio .wx-radio-input{ width: 25rpx; height: 25rpx; border-radius: 50%; } /* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */ radio .wx-radio-input.wx-radio-input-checked { background: #0394F0 !important; border-color:#0394F0 !important; } /* 选中后的 对勾样式 (白色对勾 可根据UI需求自己修改) */ radio .wx-radio-input.wx-radio-input-checked::before { width: 18rpx; height: 18rpx; line-height: 18rpx; text-align: center; font-size: 22rpx; color: #fff; background: transparent; transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); }
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!