Validated inputs in `.input-group` shouldn't be behind sibling element (#33644)

Added z-index property for input-group only for invalid state

diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 283462fd56010cefaa7354f9fac9ee588e7ad829..dc5bdb0b92561d8b304dd8fafe5bcb5818c0c275 100644 (file)
--- 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;
+      }
     }
   }
 }