zoukankan      html  css  js  c++  java
  • 小程序单选按钮

    <radio color="red" checked='true' class='radio' value='s'></radio>
    <radio color="#000" checked='true' class='radio sm' value='s'></radio>
    <radio color="#66666" checked='true' class='radio radio-full' value='s'></radio>
    <radio color="green" checked='true' class='radio radio-full sm' value='s'></radio>
    <radio color="rgba(0,0,0,0.5)" checked='true' class='radio react' value='s'></radio>
    <radio color="blue" checked='true'class='radio react sm' value='s'></radio>
    <radio color="#FF00FF" checked='true' class='radio react radio-full' value='s'></radio>
    <radio color="#e4393c" checked='true' class='radio react radio-full sm' value='s'></radio>
    .radio {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Helvetica Neue, Helvetica, sans-serif;
    }
    
    .radio {
      position: relative;
    }
    
    .radio .wx-radio-input {
      margin: 0;
      width: 24px;
      height: 24px;
    }
    
    .radio.react  .wx-radio-input {
      border-radius: 10% !important;
    }
    
    .radio::before, .radio .wx-radio-input::before {
      display: none;
    }
    
    .radio[checked]::after {
      content: "";
      background: transparent;
      display: block;
      position: absolute;
      width: 8px;
      height: 8px;
      z-index: 10;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      margin: auto;
      border-radius: 50%;
      border: 8px solid #fff !important;
    }
    
    .radio.react[checked]::after {
      border-radius: 10%;
    }
    
    .radio.sm .wx-radio-input {
      margin: 0;
      width: 14px;
      height: 14px;
    }
    
    .radio.sm[checked]::after {
      top: 1px !important;
      right: 1px !important;
      width: 4px;
      height: 4px;
      border: 5px solid #fff !important;
    }
    
    .radio[class*="-full"][checked]::after {
      width: 16px;
      height: 16px;
      border: 4px solid #fff !important;
    }
    
    .radio.sm[class*="-full"][checked]::after {
      top: 1px;
      right: 1px;
      width: 8px;
      height: 8px;
      border: 3px solid #fff !important;
    }
    
    .radio.react[class*="-full"][checked]::after {
      width: 16px;
      height: 16px;
      border: 4px solid #fff !important;
    }
    
    .radio.react.sm[class*="-full"][checked]::after {
      top: 1px;
      right: 1px;
      width: 8px;
      height: 8px;
      border: 3px solid #fff !important;
    }
  • 相关阅读:
    Java实现微生物增殖
    HttpClient学习整理
    在Eclipse中使用JUnit4进行单元测试(初级篇)
    http post提交数组
    postman测试post请求参数为json类型
    【springmvc】传值的几种方式&&postman接口测试
    postman的使用方法详解!最全面的教程
    Gson 使用总结 高级用法
    各个JSON技术的比较(Jackson,Gson,Fastjson)的对比
    Session保存用户名到Session域对象中
  • 原文地址:https://www.cnblogs.com/dianzan/p/10949270.html
Copyright © 2011-2022 走看看