diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 283462fd5601..dc5bdb0b9256 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -130,7 +130,14 @@
   .input-group .form-control,
   .input-group .form-select {
     @include form-validation-state-selector($state) {
-      z-index: 3;
+      @if $state == "valid" {
+        z-index: 1;
+      } @else if $state == "invalid" {
+        z-index: 2;
+      }
+      &:focus {
+        z-index: 3;
+      }
     }
   }
 }