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

转载 武当山道士  2018-08-03 10:34  阅读 261 次 评论 0 条

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. }

历史上的今天:

关注我们:请关注一下我们的微信公众号:扫描二维码黄良钵博客的公众号,公众号:HLB_Blog
温馨提示:文章内容系作者个人观点,不代表黄良钵博客对观点赞同或支持。
版权声明:本文为转载文章,来源于 武当山道士 ,版权归原作者所有,欢迎分享本文,转载请保留出处!

发表评论


表情