专栏首页w候人兮猗的博客微信小程序修改checkbox组件默认样式
原创

微信小程序修改checkbox组件默认样式

关于

  • UI设计的多选框的样式十分好看,微信自带的样式丑到爆,这时候就需要我们自定义checkbox的默认样式了。

正文

  • checkbox组件,默认的组件样式很丑,有的时候需要根据业务UI实现自己的checkbox。先给<checkbox class="checkbox"/>一个.checkbox类名
.checkbox .wx-checkbox-input {
  border-radius: 32rpx; /* 圆角 */
  width: 32rpx; /* 背景的宽 */
  height: 32rpx; /* 背景的高 */
  border: 2px solid rgba(255, 129, 92, 1);
}

.checkbox .wx-checkbox-input-disabled {
  border-radius: 32rpx; /* 圆角 */
  width: 32rpx; /* 背景的宽 */
  height: 32rpx; /* 背景的高 */
  background: #f3f3f3;
  border: 1px solid rgba(201, 201, 201, 1);
}

.checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background: rgba(255, 129, 92, 1);
}

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

.checkbox .wx-checkbox-input {
  border-radius: 32rpx; /* 圆角 */
  width: 32rpx; /* 背景的宽 */
  height: 32rpx; /* 背景的高 */
  border: 1px solid rgba(255, 129, 92, 1);
}

.checkbox .wx-checkbox-input-disabled {
  border-radius: 32rpx; /* 圆角 */
  width: 32rpx; /* 背景的宽 */
  height: 32rpx; /* 背景的高 */
  background: #f3f3f3;
  border: 1px solid rgba(201, 201, 201, 1);
}

.checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background: rgba(255, 129, 92, 1);
}

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

补充

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序修改checkbox组件默认样式

    w候人兮猗
  • 从零构建Sentry v10 进行异常上报

    Sentry 是一个开源的实时错误追踪系统,可以帮助开发者实时监控并修复异常问题。它主要专注于持续集成、提高效率并且提升用户体验。

    w候人兮猗
  • 什么是Web安全

    攻击者通过给别人发送带有恶意脚本代码参数的URL,当URL地址被打开时,特有的恶意代码参数被HTML解析、执行,从而达到攻击目的(获取用户信息,侵犯隐私)

    w候人兮猗
  • 微信小程序修改checkbox组件默认样式

    w候人兮猗
  • kubernetes-8:kibana容器化

    http://toutiao.com/item/6699441606832947723/

    千里行走
  • [ASP.NET] 如果将缓存“滑动过期时间”设置为1秒会怎样?

    今天编写了一个采用ASP.NET Caching的组件,在为它编写Unit Test的过程中发现了一个有趣的问题,接下来我通过一个简单的实例说明这个问题。我们在...

    蒋金楠
  • 混合线性模型学习笔记5

    这篇文档,是为那些想了解混合线性模型的人准备的。这里面很多部分,可以在很多领域中使用 。我们假定大家对一些矩阵和线性回归的理论有所了解,但是更高级的知识只有模糊...

    邓飞
  • “旅游革命”打造云南产业转型升级版

    ? ? 冬季的云南迪庆藏族自治州,梅里雪山雨崩神瀑洁净宁静,明永冰川亘古奇美,深邃的香格里拉普达措国家公园人头攒动……如今,中外游客选择冬季到迪庆旅游已成为一...

    腾讯文旅
  • java架构之路(多线程)大厂方式手写单例模式

      属于创建类型的一种常用的软件设计模式。通过单例模式的方法创建的类在当前进程中只有一个实例(根据需要,也有可能一个线程中属于单例,如:仅线程上下文内使用同一个...

    小菜的不能再菜
  • Opportunity的chance of success的赋值逻辑

    从下列function module CRM_OPPORT_H_PROB_SET_EC可看出,当status不为代码中的这些硬编码的值时,chance of s...

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券