jfcloud-front-toolkit/style/reset-el-input.scss

// form-item 进行校验的时候加上边框颜色
.is-error {

  .el-input.el-input--mini,
  .el-input.el-input--small,
  .el-input.el-input--medium {
    border-color: #ff4d4f;
  }
}

// input start
// 处理input禁用样式
.el-input.is-disabled {
  background-color: #f6f8f9;
}

// 处理input显示输入字数统计，遮挡文本内容的问题
.el-input.el-input--mini,
.el-input.el-input--small,
.el-input.el-input--medium {
  border: 1px solid #dcdfe6;
  border-radius: 2.5px;
  display: inline-flex !important;
  align-items: center;
  overflow: hidden;

  input {
    border-width: 0 !important;
    padding: 0 8px !important;
  }

  // 前置图标处理
  &:has(.el-input__prefix) {
    padding-left: 30px;
    box-sizing: border-box;
  }

  .el-input__suffix {
    display: block !important;
    position: relative !important;
    width: max-content;
    white-space: nowrap;

    span.el-input__suffix-inner {
      .el-input__count-inner {
        // padding-left: 0;
        transform: translate(5px);
      }
    }

    // 处理 clearable 和 show-password 样式冲突
    // span.el-input__suffix-inner:has(.el-icon-view) {
    //   padding-left: 5px;
    //   white-space: nowrap;
    //   display: block;
    // }
  }
}

// 设置图标区域的行高
$sizes: (
  "mini": 28px,
  "small": 32px,
  "medium": 36px,
);

@each $size, $height in $sizes {
  .el-input--#{$size} {

    .el-input__prefix,
    .el-input__suffix {
      height: $height;
      line-height: $height;

      .el-input__suffix-inner,
      .el-input-group__append {
        height: $height;
        line-height: $height;
      }
    }

    // 前置
    .el-input-group__prepend,
    // 后置
    .el-input-group__append {
      height: $height;
      line-height: $height;
    }
  }
}

// input添加了插槽之后的问题
.el-input.el-input--mini.el-input-group,
.el-input.el-input--small.el-input-group,
.el-input.el-input--medium.el-input-group {
  // display: inline-table !important;

  input {
    padding: 0 30px 0 15px !important;
    flex: 1;
  }

  // 前置
  .el-input-group__prepend,
  // 后置
  .el-input-group__append {
    border-width: 0;
    padding: 0 20px;
    width: fit-content;
  }

  // 前置
  .el-input-group__prepend {
    border-right: 1px solid #dcdfe6;
  }

  // 后置
  .el-input-group__append {
    border-left: 1px solid #dcdfe6;
  }

  .el-input__suffix {
    transform: translate(0) !important;
    width: fit-content;
    margin-left: -25px;
    overflow: hidden;
  }
}

// 登录页面输入框有边框
.login-form {
  .el-form-item {

    .el-input.el-input--mini,
    .el-input.el-input--small,
    .el-input.el-input--medium {
      border-width: 0;

      input {
        padding: 0 30px 0 15px !important;
      }
    }

    i.ri-eye-off-line {
      top: 0 !important;
    }
  }
}

// input end

// date-picker start
// 上面的样式会导致时间选择组件icon与文本重叠
.el-date-editor:not(.el-range-editor) {
  input {
    margin-left: 25px !important;
  }
}

// 处理前置的问题
.el-date-editor.el-input--prefix {
  input {
    margin-left: 0 !important;
  }
}

// 处理时间范围选择组件 placeholder文本被遮挡的问题
.el-range-editor {
  .el-range-separator {
    width: max-content;
  }
}

// date-picker end

// textarea start
// 处理文本域显示输入字数统计，遮挡文本内容的问题
.el-textarea.el-input--mini,
.el-textarea.el-input--small,
.el-textarea.el-input--medium {
  position: relative;

  textarea {}

  .el-input__count {
    position: relative;
    display: block;
    bottom: 0;
    right: 0;
    text-align: right;
  }
}

// textarea end

// input-number start
@each $size, $height in $sizes {
  .el-input-number--#{$size} {
    height: $height;
    line-height: $height;

    .el-input--#{$size} {
      .el-input__inner {
        padding: 0 calc(#{$height} + 5px) !important;
      }
    }
  }

  // 控制器在右侧的时候，会有间隔
  .is-controls-right {
    .el-input--#{$size} {
      height: $height;
      line-height: $height;

      .el-input__inner {
        padding: 0 calc(#{$height} + 5px) 0 8px !important;
      }
    }
  }
}

// input-number end

// 处理单选框的报错 Blocked aria-hidden on an element because its descendant retained focus.
input[aria-hidden="true"] {
  display: none !important;
}

.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
  box-shadow: none !important;
}