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;
    }
  • 相关阅读:
    mysql免安装
    记一次电脑DNS被劫持
    小程序中page声明周期onShow
    微信公众号调试
    wx.navigateTo()
    mongodb 数据库安装
    小程序中使用坐标获得地区名称
    小程序 <include >
    记一点typescript whitespace rule
    小程序<template>的使用
  • 原文地址:https://www.cnblogs.com/dianzan/p/10949270.html
Copyright © 2011-2022 走看看