微信小程序 自定义单选(radio)、复选按钮样式(checkbox)样式

radio

  1. /*  重写 radio 样式  */
  2. /* 未选中的 背景样式 */
  3. radio .wx-radio-input{
  4.    border-radius: 50%;/* 圆角 */
  5.    width: 40rpx;
  6.    height: 40rpx;
  7. }
  8. /* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */
  9. radio .wx-radio-input.wx-radio-input-checked{
  10.    bordernone;
  11.    backgroundred;
  12. }
  13. /* 选中后的 对勾样式 (白色对勾 可根据UI需求自己修改) */
  14. radio .wx-radio-input.wx-radio-input-checked::before{
  15.    border-radius: 50%;/* 圆角 */
  16.    width: 40rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
  17.    height: 40rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
  18.    line-height: 40rpx;
  19.    text-aligncenter;
  20.    font-size:30rpx; /* 对勾大小 30rpx */
  21.    color:#fff/* 对勾颜色 白色 */
  22.    backgroundtransparent;
  23.    transform:translate(-50%, -50%) scale(1);
  24.    -webkit-transform:translate(-50%, -50%) scale(1);
  25. }

checkbox

  1. /*  重写 checkbox 样式  */
  2. /* 未选中的 背景样式 */
  3. checkbox .wx-checkbox-input{
  4.    border-radius: 50%;/* 圆角 */
  5.    width: 40rpx; /* 背景的宽 */
  6.    height: 40rpx; /* 背景的高 */
  7. }
  8. /* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */
  9. checkbox .wx-checkbox-input.wx-checkbox-input-checked{
  10.    bordernone;
  11.    backgroundred;
  12. }
  13. /* 选中后的 对勾样式 (白色对勾 可根据UI需求自己修改) */
  14. checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
  15.    border-radius: 50%;/* 圆角 */
  16.    width: 40rpx;/* 选中后对勾大小,不要超过背景的尺寸 */
  17.    height: 40rpx;/* 选中后对勾大小,不要超过背景的尺寸 */
  18.    line-height: 40rpx;
  19.    text-aligncenter;
  20.    font-size:30rpx; /* 对勾大小 30rpx */
  21.    color:#fff/* 对勾颜色 白色 */
  22.    backgroundtransparent;
  23.    transform:translate(-50%, -50%) scale(1);
  24.    -webkit-transform:translate(-50%, -50%) scale(1);
  25. }

黄良钵

博客站长,前端开发工程师

Leave a Reply

Your email address will not be published. Required fields are marked *

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

微信小程序 自定义单选(radio)、复选按钮样式(checkbox)样式
返回顶部
网站稳定运行 : {{ diffYears }}年 零 {{ diffDays }}天 {{ diffHours }} 小时 {{ diffMinutes }} 分钟 {{ diffSeconds }} 秒

显示

忘记密码?

显示

显示

获取验证码

Close