单选框 改成 复选框 的css样式

寻技术 Html/CSS 2023年07月11日 69

fillEditorFakeTable.less

/* add for the global title checkbox fake */
.fake-checkbox {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
  line-height: ;
  position: relative;
  .ivu-radio-wrapper {
    padding-left: .1rem;
    margin-bottom: .05rem;
    vertical-align: middle;
    .ivu-radio {
      display: inline-block;
      vertical-align: middle;
      white-space: nowrap;
      cursor: pointer;
      line-height: ;
      position: relative;
      .ivu-radio-inner {
        display: inline-block;
        width: 14px;
        height: 14px;
        position: relative;
        top: ;
        left: ;
        border: 1px solid #dcdee2;
        border-radius: 2px;
        background-color: #fff;
        transition: border-color .2s ease-in-out, background-color .2s ease-in-out, box-shadow .2s ease-in-out;
        &::after {
          content: '';
          display: table;
          width: 4px !important;
          height: 8px !important;
          position: absolute;
          top: 1px;
          left: 4px;
          border: 2px solid #fff;
          border-top: ;
          border-left: ;
          transform: rotate(45deg) scale();
          transition: all .2s ease-in-out;
        }
      }
      .ivu-radio-input {
        width: %;
        height: %;
        position: absolute;
        top: ;
        bottom: ;
        left: ;
        right: ;
        z-index: ;
        cursor: pointer;
        opacity: ;
      }
      &.ivu-radio-checked {
        .ivu-radio-inner {
          border-color: #2d8cf0;
          background-color: #2d8cf0;
          &::after {
            transform: rotate(45deg) scale();
          }
        }
      }
      &.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;
        }
      }
    }
  }
}

 

关闭

用微信“扫一扫”