微信小程序 -- checkbox、radio改变默认样式

最新推荐文章于 2024-07-29 14:03:25 发布

星星之火M

最新推荐文章于 2024-07-29 14:03:25 发布

阅读量3.7k

点赞数 3

本文链接：https://blog.csdn.net/qq_41638795/article/details/99724969

版权

本文介绍了如何在微信小程序中自定义checkbox和radio的样式。内容包括如何改变checkbox和radio的默认颜色，以及如何将它们从方形转换为圆形，通过设置border-radius属性来实现视觉效果的转变。

摘要由CSDN通过智能技术生成

在微信小程序中，checkbox、radio的默认样式如下：

但是有时我们需要改变它的样式，如其他颜色、多项选择为圆圈、单项选择为方框等等。例子如下：

实现如下：

1. checkbox样式

/* 未选中的 背景样式 */
checkbox .wx-checkbox-input {
  width: 35rpx; /* 背景的宽 */
  height: 35rpx; /* 背景的高 */
  line-height: 35rpx;
  border-radius: 3px;/* 圆角:border-radius: 50%; */
}

/* 选中后的 背景样式  */
checkbox .wx-checkbox-input.wx-checkbox-inpu