// 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 0 0 8px !important; } .el-input__suffix { display: block !important; position: relative !important; width: max-content; span.el-input__suffix-inner { display: flex; flex-direction: column; align-items: flex-end; .el-input__count-inner { width: max-content; // padding-left: 0; transform: translate(5px); } } } } // 设置图标区域的行高 $sizes: ( "mini": 28px, "small": 32px, "medium": 36px, ); @each $size, $height in $sizes { .el-input--#{$size} { .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; } } // 处理时间范围选择组件 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; }