fix(components): [input] fix status icon gap (#7228)

docs/examples/input/mixed-input.vue

@@ -16,7 +16,7 @@
       class="input-with-select"
     >
       <template #prepend>
-        <el-select v-model="select" placeholder="Select" style="width: 110px">
+        <el-select v-model="select" placeholder="Select" style="width: 115px">
           <el-option label="Restaurant" value="1" />
           <el-option label="Order No." value="2" />
           <el-option label="Tel" value="3" />
@@ -37,7 +37,7 @@
         <el-button :icon="Search" />
       </template>
       <template #append>
-        <el-select v-model="select" placeholder="Select" style="width: 110px">
+        <el-select v-model="select" placeholder="Select" style="width: 115px">
           <el-option label="Restaurant" value="1" />
           <el-option label="Order No." value="2" />
           <el-option label="Tel" value="3" />

packages/components/input/src/input.vue

@@ -92,17 +92,17 @@
                 {{ textLength }} / {{ attrs.maxlength }}
               </span>
             </span>
+            <el-icon
+              v-if="validateState && validateIcon && needStatusIcon"
+              :class="[
+                nsInput.e('icon'),
+                nsInput.e('validateIcon'),
+                nsInput.is('loading', validateState === 'validating'),
+              ]"
+            >
+              <component :is="validateIcon" />
+            </el-icon>
           </span>
-          <el-icon
-            v-if="validateState && validateIcon && needStatusIcon"
-            :class="[
-              nsInput.e('icon'),
-              nsInput.e('validateIcon'),
-              nsInput.is('loading', validateState === 'validating'),
-            ]"
-          >
-            <component :is="validateIcon" />
-          </el-icon>
         </span>
       </div>
 

packages/theme-chalk/src/input.scss

@@ -130,8 +130,6 @@
     color: var(--el-input-icon-color);
     font-size: map.get($input-font-size, 'default');
     cursor: pointer;
-    transition: var(--el-transition-color) !important;
-    margin-left: 8px;
 
     &:hover {
       color: var(--el-input-clear-hover-color);
@@ -149,7 +147,7 @@
       background: getCssVar('fill-color', 'blank');
       line-height: initial;
       display: inline-block;
-      padding: 0 5px;
+      padding-left: 8px;
     }
   }
 
@@ -232,6 +230,13 @@
         > :last-child {
           margin-right: 8px;
         }
+
+        > :first-child {
+          &,
+          &.#{$namespace}-input__icon {
+            margin-left: 0;
+          }
+        }
       } @else {
         > :first-child {
           margin-left: 8px;
@@ -246,6 +251,7 @@
     justify-content: center;
     align-items: center;
     transition: all var(--el-transition-duration);
+    margin-left: 8px;
   }
 
   @include e(validateIcon) {