微信小程序查看官方样式及修改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; /* 对勾颜色 白色 */
}
相关推荐
@PHARAOH14 小时前
WHAT - uni-app 条件编译技术
小程序·uni-app·条件编译
hunzi_116 小时前
选择网上购物系统要看几方面?
java·微信小程序·小程序·uni-app·php
芭拉拉小魔仙18 小时前
Uniapp Vue3 小程序接入实时音视频TUICallKit遇到的问题
小程序·uni-app·实时音视频
2305_7978820919 小时前
AI识图小程序的功能框架设计
人工智能·微信小程序·小程序
暮雨哀尘20 小时前
微信小程序开发:开发实践
开发语言·算法·微信小程序·小程序·notepad++·性能·技术选型
幽络源小助理1 天前
微信小程序实验室管理SSM系统设计与实现
微信小程序·小程序
zoahxmy09291 天前
微信小程序 request 流式数据处理
微信小程序
人人题1 天前
汽车加气站操作工考试答题模板
笔记·职场和发展·微信小程序·汽车·创业创新·学习方法·业界资讯
曲江涛2 天前
微信小程序 webview 定位 并返回
微信小程序·小程序
weixin_440470502 天前
部署Dify接入微信验证反代根目录创建一个文件通过微信小程序验证
微信小程序·腾讯云