reset-el-input.scss 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. // form-item 进行校验的时候加上边框颜色
  2. .is-error {
  3. .el-input.el-input--mini,
  4. .el-input.el-input--small,
  5. .el-input.el-input--medium {
  6. border-color: #ff4d4f;
  7. }
  8. }
  9. // input start
  10. // 处理input禁用样式
  11. .el-input.is-disabled {
  12. background-color: #f6f8f9;
  13. }
  14. // 处理input显示输入字数统计,遮挡文本内容的问题
  15. .el-input.el-input--mini,
  16. .el-input.el-input--small,
  17. .el-input.el-input--medium {
  18. border: 1px solid #dcdfe6;
  19. border-radius: 2.5px;
  20. display: inline-flex !important;
  21. align-items: center;
  22. overflow: hidden;
  23. input {
  24. border-width: 0 !important;
  25. padding: 0 0 0 8px !important;
  26. }
  27. .el-input__suffix {
  28. display: block !important;
  29. position: relative !important;
  30. width: max-content;
  31. span.el-input__suffix-inner {
  32. display: flex;
  33. flex-direction: column;
  34. align-items: flex-end;
  35. .el-input__count-inner {
  36. width: max-content;
  37. // padding-left: 0;
  38. transform: translate(5px);
  39. }
  40. }
  41. }
  42. }
  43. // 设置图标区域的行高
  44. $sizes: (
  45. "mini": 28px,
  46. "small": 32px,
  47. "medium": 36px,
  48. );
  49. @each $size, $height in $sizes {
  50. .el-input--#{$size} {
  51. .el-input__suffix {
  52. height: $height;
  53. line-height: $height;
  54. .el-input__suffix-inner,
  55. .el-input-group__append {
  56. height: $height;
  57. line-height: $height;
  58. }
  59. }
  60. // 前置
  61. .el-input-group__prepend ,
  62. // 后置
  63. .el-input-group__append {
  64. height: $height;
  65. line-height: $height;
  66. }
  67. }
  68. }
  69. // input添加了插槽之后的问题
  70. .el-input.el-input--mini.el-input-group,
  71. .el-input.el-input--small.el-input-group,
  72. .el-input.el-input--medium.el-input-group {
  73. // display: inline-table !important;
  74. input {
  75. padding: 0 30px 0 15px !important;
  76. flex: 1;
  77. }
  78. // 前置
  79. .el-input-group__prepend ,
  80. // 后置
  81. .el-input-group__append {
  82. border-width: 0;
  83. padding: 0 20px;
  84. width: fit-content;
  85. }
  86. // 前置
  87. .el-input-group__prepend {
  88. border-right: 1px solid #dcdfe6;
  89. }
  90. // 后置
  91. .el-input-group__append {
  92. border-left: 1px solid #dcdfe6;
  93. }
  94. .el-input__suffix {
  95. transform: translate(0) !important;
  96. width: fit-content;
  97. margin-left: -25px;
  98. overflow: hidden;
  99. }
  100. }
  101. // 登录页面输入框有边框
  102. .login-form {
  103. .el-form-item {
  104. .el-input.el-input--mini,
  105. .el-input.el-input--small,
  106. .el-input.el-input--medium {
  107. border-width: 0;
  108. input {
  109. padding: 0 30px 0 15px !important;
  110. }
  111. }
  112. i.ri-eye-off-line {
  113. top: 0 !important;
  114. }
  115. }
  116. }
  117. // input end
  118. // date-picker start
  119. // 上面的样式会导致时间选择组件icon与文本重叠
  120. .el-date-editor:not(.el-range-editor) {
  121. input {
  122. margin-left: 25px !important;
  123. }
  124. }
  125. // 处理时间范围选择组件 placeholder文本被遮挡的问题
  126. .el-range-editor {
  127. .el-range-separator {
  128. width: max-content;
  129. }
  130. }
  131. // date-picker end
  132. // textarea start
  133. // 处理文本域显示输入字数统计,遮挡文本内容的问题
  134. .el-textarea.el-input--mini,
  135. .el-textarea.el-input--small,
  136. .el-textarea.el-input--medium {
  137. position: relative;
  138. textarea {
  139. }
  140. .el-input__count {
  141. position: relative;
  142. display: block;
  143. bottom: 0;
  144. right: 0;
  145. text-align: right;
  146. }
  147. }
  148. // textarea end
  149. // 处理单选框的报错 Blocked aria-hidden on an element because its descendant retained focus.
  150. input[aria-hidden="true"] {
  151. display: none !important;
  152. }
  153. .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
  154. box-shadow: none !important;
  155. }