zoukankan      html  css  js  c++  java
  • 微信小程序radio的样式修改

     <radio-group bindchange="radioChange" name="sex">
                    <label class="" wx:for="{{sex}}" wx:key="{{item.value}}" style="margin-right:40rpx;">
                        <radio value="{{item.value}}" checked="true"/>{{item.text}}
                    </label>
    </radio-group> 
    radio .wx-radio-input.wx-radio-input-checked {
      border-color: #cc0000;
      background: #cc0000;
    }
    radio .wx-radio-input {
      height: 35rpx;
      width: 35rpx;
      margin-top: -4rpx;
      border-radius: 50%;
      border: 2rpx solid #999;
      background: transparent;
    }
    radio .wx-radio-input.wx-radio-input-checked::before {
      border-radius: 50%; /* 圆角 */
      width: 35rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
      height: 35rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
      line-height: 35rpx;
      text-align: center;
      font-size: 28rpx; /* 对勾大小 30rpx */
      color: #fff; /* 对勾颜色 白色 */
      background: #cc0000;
      transform: translate(-50%, -50%) scale(1);
      -webkit-transform: translate(-50%, -50%) scale(1);
    }
    Page({
      data: {
          sex:[
            {text:'男',value:1},
            {text:'女',value:2},
          ]
      }
    })
  • 相关阅读:
    过度和动画
    自定义指令
    使用ref操作DOM和过滤器的使用
    计算属性与侦听器
    MVVM设计思想
    vue template
    Vue初探
    npm 6.14 + Babel 7 使用
    5行代码起一个服务
    vue打包后引入js和css用相对路径引入
  • 原文地址:https://www.cnblogs.com/qiao20/p/15146916.html
Copyright © 2011-2022 走看看