zoukankan      html  css  js  c++  java
  • 二十四、小程序中改变checkbox和radio的样式

    来源:https://blog.csdn.net/qq_39364032/article/details/79742415

    在微信小程序里面,有时候为了配合整个项目的风格,checkbox和radio的样式会有些不同。
    
    1. 修改checkbox样式
    
    .wxml
    
    <checkbox-group class='pull-left' bindchange="checkboxChange">
    
    <label class="checkbox flex flex-vc ">
    
    <checkbox bindchange='checkboxChange' value="" checked="{{checkboxStatus}}" color='#fff'/>
    
    <view>可用2000个积分币抵扣</view>
    
    </label>
    
    </checkbox-group>
    
    .wxss
    
    /* checkbox未选中时样式 */
    
    checkbox .wx-checkbox-input{
    
    border-radius: 3rpx;
    
    height: 26rpx;
    
     26rpx;
    
    margin-top: -4rpx;
    
    /* 自定义样式.... */
    
    }
    
     
    
    /* checkbox选中时样式 */
    
    checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
    
    background-color: #e02e24;
    
    border: 1rpx solid #e02e24;
    
    /* 自定义样式.... */
    
    }
    
    2. 修改radio样式
    
    .wxml
    
    <radio-group class="radio-group" bindchange="radioChange">
    
      <label class="radio" wx:for="{{items}}">
    
        <radio value="{{item.name}}" checked="{{item.checked}}" color="#fff"/>{{item.value}}
    
      </label></radio-group>
    
    .wxss
    
    /* radio未选中时样式 */
    
    radio .wx-radio-input{
    
    border-radius: 3rpx;
    
    height: 26rpx;
    
     26rpx;
    
    margin-top: -4rpx;
    
    /* 自定义样式.... */
    
    }
    
     
    
    /* radio选中时样式 */
    
    radio .wx-radio-input.wx-radio-input-checked::before{
    
    background-color: #e02e24;
    
    border: 1rpx solid #e02e24;
    
    /* 自定义样式.... */
    
    }
    

      

  • 相关阅读:
    代码编译时JDK版本和运行时JDK版本不一致启动项目报错
    Apache 环境变量配置
    Android NDK 环境变量配置
    Android SDK 环境变量配置
    JAVA 环境变量配置
    FFmpeg Download
    JAVA SE Download
    VS 2015 Download
    BASS HOME
    C++11的闭包(lambda、function、bind)
  • 原文地址:https://www.cnblogs.com/deng-jie/p/9246166.html
Copyright © 2011-2022 走看看