我们在用 uni-app 开发前端页面时,往往需要修改一些组件的默认样式,特别是颜色。那么如何修改 radio/checkbox/switch(单选框/复选框/开关)的样式呢?可以通过覆盖样式的方式实现。
下面以单选框 radio 为例(基于 colorui)说明。
在 App.vue 文件的 style 中增加以下样式覆盖 colorui 的样式:/* 重设 radio、checkbox 大小和位置,否则在不同分辨率小会变形 */
/* #ifndef MP-ALIPAY */
radio::before,
checkbox::before {
margin-top: -8rpx;
right: 8rpx;
font-size: 36rpx;
line-height: 16rpx;
}
radio .wx-radio-input,
checkbox .wx-checkbox-input,
radio .uni-radio-input,
checkbox .uni-checkbox-input {
margin: 0;
width: 48rpx;
height: 48rpx;
}
/* #endif */
/* 覆盖样式修改颜色 */
switch.theme[checked] .wx-switch-input.wx-switch-input-checked,
checkbox.theme[checked] .wx-checkbox-input,
radio.theme[checked] .wx-radio-input,
switch.theme.checked .uni-