Fix floating label text cut off in select elements

Fixes #33711, fixes #34147
twbs · Dec 11, 2023 · 92122f1 · 92122f1
1 parent 4352422
commit 92122f1
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1069,11 +1069,13 @@ $form-file-button-hover-bg:       var(--#{$prefix}secondary-bg) !default;
 
 // scss-docs-start form-floating-variables
 $form-floating-height:                  add(3.5rem, $input-height-border) !default;
-$form-floating-line-height:             1.25 !default;
+$form-floating-line-height:             1.3125 !default;
 $form-floating-padding-x:               $input-padding-x !default;
 $form-floating-padding-y:               1rem !default;
 $form-floating-input-padding-t:         1.625rem !default;
 $form-floating-input-padding-b:         .625rem !default;
+$form-floating-select-padding-t:        1.25rem !default;
+$form-floating-select-padding-b:        .25rem !default;
 $form-floating-label-height:            1.5em !default;
 $form-floating-label-opacity:           .65 !default;
 $form-floating-label-transform:         scale(.85) translateY(-.5rem) translateX(.15rem) !default;

diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
@@ -47,8 +47,8 @@
   }
 
   > .form-select {
-    padding-top: $form-floating-input-padding-t;
-    padding-bottom: $form-floating-input-padding-b;
+    padding-top: $form-floating-select-padding-t;
+    padding-bottom: $form-floating-select-padding-b;
   }
 
   > .form-control:focus,