zoukankan      html  css  js  c++  java
  • 微信小程序radio单选框如何修改宽高及选中样式

     

    之前写过关于多选框设置样式的办法,其实与单选框设置的方法一样,唯一不同的是,在css样式里,/* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */的下面定义的css需要加上!important才会生效,意思是本css拥有最高权重,但是多选框就不用,挺逗的。

    关于多选框的设置方法:微信小程序checkbox多选框如何修改宽高及选中样式

    <radio-group @change="radioChange">
    	<label>
    		<radio value="1" :checked="true" />是
    	</label>
    	<label>
    		<radio value="0" :checked="false" />否
    	</label>
    </radio-group>

    css代码

    /*radio未选中时样式 */
    radio .wx-radio-input{
     25rpx;
    height: 25rpx;
    border-radius: 50%;
    }
    
    
    /* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */
    radio .wx-radio-input.wx-radio-input-checked {
    background: #0394F0 !important;
    border-color:#0394F0 !important;
    }
    
    /* 选中后的 对勾样式 (白色对勾 可根据UI需求自己修改) */
    radio .wx-radio-input.wx-radio-input-checked::before {
     18rpx;
    height: 18rpx;
    line-height: 18rpx;
    text-align: center;
    font-size: 22rpx;
    color: #fff;
    background: transparent;
    transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
    }
  • 相关阅读:
    php责任链模式
    php工厂模式
    php观察者模式
    php单例模式
    php的抽象类
    Mysqli的常用函数
    PDO的基本操作
    算法--各种算法
    file_get_post实现post请求
    redis的5种数据结构的使用场景介绍
  • 原文地址:https://www.cnblogs.com/lsongyang/p/13427743.html
Copyright © 2011-2022 走看看