Add missing transition to `.form-select` (#34034)

A selectbox is styled in a very similar way as an input (`.form-control`), including border-color and box-shadow. So it can be assumed it should apply the same CSS transition for these properties when focused, but this was missing.

Co-authored-by: alpadev <2838324+alpadev@users.noreply.github.com>

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 9a1f3daad9edac342d837f44a859de418202cca2..11819f440036ad0cba0c973fa05f22cf12336cdf 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -826,6 +826,8 @@ $form-select-font-size-sm:        $input-font-size-sm !default;
 $form-select-padding-y-lg:        $input-padding-y-lg !default;
 $form-select-padding-x-lg:        $input-padding-x-lg !default;
 $form-select-font-size-lg:        $input-font-size-lg !default;
+
+$form-select-transition:          $input-transition !default;
 // scss-docs-end form-select-variables
 
 // scss-docs-start form-range-variables

diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
index 70256255a7db3d21d169872ac6bb5be82d9f56d1..4506a979ad8c0ae6e8d9a9d98706194a7619e3da 100644 (file)
--- a/scss/forms/_form-select.scss
+++ b/scss/forms/_form-select.scss
@@ -22,6 +22,7 @@
   border: $form-select-border-width solid $form-select-border-color;
   @include border-radius($form-select-border-radius, 0);
   @include box-shadow($form-select-box-shadow);
+  @include transition($form-select-transition);
   appearance: none;
 
   &:focus {