微信小程序查看官方样式及修改checkbox样式为圆圈

小程序中checkbox的样式是正方形的,设计图上给的是一个圆圈,在查看官方demo的时候发现了怎么修改的

  1. 首先在微信官方文档上找到复选框的demo
  1. 然后审查代码找到复选框的样式部分

可以看到选中的复选框的class为wx-checkout-input

选中的样式为wx-checkbox-input-checked

  1. 这样我们就可以自己修改样式了

先弄成圆圈:

复制代码
	<checkbox class="interestthreecheckbox" value="{{item.id}}"/>

.interestthreecheckbox .wx-checkbox-input {
  border-radius: 50%;
  width: 35rpx;
  height: 35rpx;
}

还可以设置选中的背景颜色

复制代码
.interestthreecheckbox .wx-checkbox-input.wx-checkbox-input-checked{
  background: lightblue;
  border: 1px solid lightblue;
}

也可以修改对勾的颜色大小

对勾默认的样式:

复制代码
wx-checkbox .wx-checkbox-input.wx-checkbox-input-checked:before {
    font: normal normal normal 14px/1 "weui";
    content: "\EA08";
    font-size: 22px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%) scale(0.73);
    -webkit-transform: translate(-50%, -48%) scale(0.73);

修改的样式

复制代码
.interestthreecheckbox .wx-checkbox-input.wx-checkbox-input-checked::before{
  width: 40rpx;/* 选中后对勾大小 */
  height: 40rpx;/* 选中后对勾大小 */
  font-size:80rpx; /* 对勾大小30rpx */
  color:blue; /* 对勾颜色 白色 */
}
相关推荐
努力成为包租婆5 小时前
微信小程序 van-dropdown-menu
微信·微信小程序·小程序
thinkQuadratic7 小时前
微信小程序动态设置高度,添加动画等常用操作
微信小程序·小程序
中科三方8 小时前
APP和小程序需要注册域名吗?(国科云)
小程序·apache
幽络源小助理10 小时前
微信小程序文章管理系统开发实现
java·微信小程序·springboot
10年前端老司机11 小时前
微信小程序模板语法和事件
前端·javascript·微信小程序
上趣工作室12 小时前
微信小程序开发1------微信小程序中的消息提示框总结
微信小程序·小程序
三天不学习14 小时前
微信小程序蓝牙连接打印机打印单据完整Demo【蓝牙小票打印】
微信小程序·小程序·蓝牙打印
韩仔搭建15 小时前
美乐迪电玩大厅加载机制与 RoomList 配置结构分析
游戏·小程序·开源·lua
WKK_17 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
老李不敲代码2 天前
榕壹云预约咨询系统:基于ThinkPHP+MySQL+UniApp打造的灵活预约小程序解决方案
mysql·微信小程序·小程序·uni-app·php