Fix input group z-index focus + validation

twbs · Aug 31, 2022 · 9846156 · 9846156
1 parent 29332a9
commit 9846156
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
@@ -22,7 +22,7 @@
   > .form-control:focus,
   > .form-select:focus,
   > .form-floating:focus-within {
-    z-index: 3;
+    z-index: 5;
   }
 
   // Ensure buttons are always above inputs for more visually pleasing borders.
@@ -33,7 +33,7 @@
     z-index: 2;
 
     &:focus {
-      z-index: 3;
+      z-index: 5;
     }
   }
 }

diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
@@ -135,16 +135,16 @@
     }
   }
 
-  .input-group .form-control,
-  .input-group .form-select {
-    @include form-validation-state-selector($state) {
-      @if $state == "valid" {
-        z-index: 1;
-      } @else if $state == "invalid" {
-        z-index: 2;
-      }
-      &:focus {
-        z-index: 3;
+  .input-group {
+    > .form-control:not(:focus),
+    > .form-select:not(:focus),
+    > .form-floating:not(:focus-within) {
+      @include form-validation-state-selector($state) {
+        @if $state == "valid" {
+          z-index: 3;
+        } @else if $state == "invalid" {
+          z-index: 4;
+        }
       }
     }
   }