fix: fix input's active background color and validate status's border color (#998)

packages/semi-foundation/input/input.scss

@@ -77,7 +77,7 @@ $module: #{$prefix}-input;
         }
 
         &:active {
-            background-color: $color-input_default-bg-focus;
+            background-color: $color-input_default-bg-active;
             border-color: $color-input_default-border-focus;
         }
     }
@@ -100,10 +100,10 @@ $module: #{$prefix}-input;
             border-color: $color-input_danger-border-focus;
         }
 
-        // &:active {
-        //     background-color: $color-input_danger-bg-active;
-        //     border-color: $color-input_danger-border-active;
-        // }
+        &:active {
+            background-color: $color-input_danger-bg-active;
+            border-color: $color-input_danger-border-focus;
+        }
     }
 
     &-warning {
@@ -120,10 +120,10 @@ $module: #{$prefix}-input;
             border-color: $color-input_warning-border-focus;
         }
 
-        // &:active {
-        //     background-color: $color-input_warning-bg-active;
-        //     border-color: $color-input_warning-border-active;
-        // }
+        &:active {
+            background-color: $color-input_warning-bg-active;
+            border-color: $color-input_warning-border-focus;
+        }
     }
 
     &__with-prefix {
@@ -288,6 +288,16 @@ $module: #{$prefix}-input;
                 }
             }
 
+            // when have prepend and append, only make the input have active bg color
+            &:active {
+                background-color: $color-input_default-bg-active;
+
+                & + .#{$module}-clearbtn,
+                & ~ .#{$module}-modebtn {
+                    background-color: $color-input_default-bg-active;
+                }
+            }
+
             &-clearbtn,
             &-modebtn,
             &-clearbtn:hover,
@@ -328,6 +338,16 @@ $module: #{$prefix}-input;
                     }
                 }
 
+                &:active {
+                    background-color:  $color-input_danger-bg-active;
+
+                    & + .#{$module}-clearbtn,
+                    & + .#{$module}-modebtn {
+                        background-color: $color-input_danger-bg-active;
+                        border-color: $color-input_danger-border-focus;
+                    }
+                }
+
                 &-clearbtn,
                 &-modebtn,
                 &-clearbtn:hover,
@@ -369,6 +389,16 @@ $module: #{$prefix}-input;
                     }
                 }
 
+                &:active {
+                    background-color:  $color-input_warning-bg-active;
+
+                    & + .#{$module}-clearbtn,
+                    & + .#{$module}-modebtn {
+                        background-color: $color-input_warning-bg-active;
+                        border-color: $color-input_warning-border-focus;
+                    }
+                }
+
                 &-clearbtn,
                 &-modebtn,
                 &-clearbtn:hover,

packages/semi-foundation/input/textarea.scss

@@ -90,7 +90,7 @@ $module: #{$prefix}-input;
 
         &:active {
             background-color: $color-input_danger-bg-active;
-            border-color: $color-input_danger-border-active;
+            border-color: $color-input_danger-border-focus;
         }
     }
 
@@ -110,7 +110,7 @@ $module: #{$prefix}-input;
 
         &:active {
             background-color: $color-input_warning-bg-active;
-            border-color: $color-input_warning-border-active;
+            border-color: $color-input_warning-border-focus;
         }
     }