uni-app中更改复选框的默认样式

uni-app复选框样式定制与微信适配

最新推荐文章于 2025-09-18 23:37:24 发布

原创最新推荐文章于 2025-09-18 23:37:24 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html #less #checkbox

uni-app开发笔记专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何调整uni-app中复选框的默认样式，包括圆形边框、颜色设置，并特别关注了微信环境下的兼容性处理。通过CSS代码展示了如何实现不同状态下的视觉效果和适配策略。

记一下uni-app复选框默认样式问题

/* #ifdef H5 */
uni-checkbox .uni-checkbox-input {
  border-radius: 50% !important;
  color: #ffffff !important;
}

uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
  border: none !important;
  background: #3d7eff;
	border-color: #3d7eff;
}

uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
	width: 20rpx;
	height: 20rpx;
	line-height: 20rpx;
	text-align: center;
	font-size: 18rpx;
	color: #fff;
	background: transparent;
	transform: translate(-70%, -50%) scale(1);
	-webkit-transform: translate(-70%, -50%) scale(1);
}

/* #endif */
/* 微信样式 */
/* #ifdef APP-PLUS ||MP-WEIXIN */
checkbox .wx-checkbox-input {
  border-radius: 50% !important;
  color: #ffffff !important;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  color: #fff;
  background: #3d7eff;
}

.wx-checkbox-input.wx-checkbox-input-checked {
  border: none !important;
}

/* #endif */