zoukankan      html  css  js  c++  java
  • 单选框 改成 复选框 的css样式

    fillEditorFakeTable.less

    /* add for the global title checkbox fake */
    .fake-checkbox {
      display: inline-block;
      vertical-align: middle;
      white-space: nowrap;
      cursor: pointer;
      line-height: 1;
      position: relative;
      .ivu-radio-wrapper {
        padding-left: 0.1rem;
        margin-bottom: 0.05rem;
        vertical-align: middle;
        .ivu-radio {
          display: inline-block;
          vertical-align: middle;
          white-space: nowrap;
          cursor: pointer;
          line-height: 1;
          position: relative;
          .ivu-radio-inner {
            display: inline-block;
             14px;
            height: 14px;
            position: relative;
            top: 0;
            left: 0;
            border: 1px solid #dcdee2;
            border-radius: 2px;
            background-color: #fff;
            transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
            &::after {
              content: '';
              display: table;
               4px !important;
              height: 8px !important;
              position: absolute;
              top: 1px;
              left: 4px;
              border: 2px solid #fff;
              border-top: 0;
              border-left: 0;
              transform: rotate(45deg) scale(0);
              transition: all 0.2s ease-in-out;
            }
          }
          .ivu-radio-input {
             100%;
            height: 100%;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1;
            cursor: pointer;
            opacity: 0;
          }
          &.ivu-radio-checked {
            .ivu-radio-inner {
              border-color: #2d8cf0;
              background-color: #2d8cf0;
              &::after {
                transform: rotate(45deg) scale(1);
              }
            }
          }
          &.ivu-radio-disabled {
            cursor: not-allowed;
            .ivu-radio-inner {
              border-color: #bebebe;
              background-color: #d7d7d7;
              &::after {
                border-color: #fff;
              }
            }
            .ivu-radio-input {
              cursor: not-allowed;
            }
          }
        }
      }
    }
  • 相关阅读:
    JAVA数据库建表工具类
    HTML加CSS3太极图demo
    MD5加密(JAVA&JS)
    Base64工具类(JAVA&JS)
    JS模拟圆周运动
    JAVA读取写入excle表兼容版
    Math.PI和Math.sin() 与 Math.cos()搭配使用详解
    MySQL8.0数据库连接问题
    echarts饼状图案例
    JS前端使用MD5加密
  • 原文地址:https://www.cnblogs.com/pengchenggang/p/11343891.html
Copyright © 2011-2022 走看看