微信小程序check box修改默认样式

checkbox .wx-checkbox-input {

  border-radius: 50%; /* 圆角 */

  width: 40rpx; /* 背景的宽 */

  height: 40rpx; /* 背景的高 */

}

/* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */

checkbox .wx-checkbox-input.wx-checkbox-input-checked {

  border: none;

  background: red; 

}

/* 选中后的 对勾样式 (白色对勾 可根据UI需求自己修改) */

checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {

  border-radius: 50%; /* 圆角 */

  width: 40rpx; /* 选中后对勾大小,不要超过背景的尺寸 */

  height: 40rpx; /* 选中后对勾大小,不要超过背景的尺寸 */

  line-height: 40rpx;

  text-align: center;

  font-size: 30rpx; /* 对勾大小 30rpx */

  color: #f0759a; /* 对勾颜色 白色 */

  background: transparent;

  transform: translate(-50%, -50%) scale(1);

  -webkit-transform: translate(-50%, -50%) scale(1);

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS参考手册 一、初识CSS3 1.1 CSS是什么 CSS3在CSS2.1的基础上增加了很多强大的新功能。目前...
    没汁帅阅读 3,748评论 1 13
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,390评论 0 7
  • 一、背景介绍 下拉列表由select标签实现,单选按钮由表单元素input的type属性radio定义。以下分别是...
    你隔壁的陌生人阅读 15,094评论 0 6
  • 转载请声明 原文链接 关注公众号获取更多资讯 这篇文章主要总结H5的一些新增的功能以及一些基础归纳,这里只是一个提...
    前端进阶之旅阅读 9,115评论 22 225
  • 前两天又一次要搞微信支付,想想就难过。因为贵公司的文档真心无力吐槽。前面几个步骤还好,这里记录一下调起支付的相关代...
    我就叫Tom怎么了阅读 1,835评论 0 5