Radio button style css into the box

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;
        width: 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;
          width: 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 {
        width: 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;
        }
      }
    }
  }
}

 

Guess you like

Origin www.cnblogs.com/pengchenggang/p/11343891.html