Update box-shadows on .custom-select (#26754)

- Fixes #25656 where custom selects had the wrong focus shadow
- Fixes #26668 where custom selects had no inset shadow (also closes #26572 which had the wrong form classes on the first example anyway)

2 files changed, 9 insertions, 2 deletions

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 5b75fcbf9..1311ba482 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -177,12 +177,17 @@
   } @else {
     border-radius: 0;
   }
+  @include box-shadow($custom-select-box-shadow);
   appearance: none;
 
   &:focus {
     border-color: $custom-select-focus-border-color;
     outline: 0;
-    box-shadow: $custom-select-focus-box-shadow;
+    @if $enable-shadows {
+      box-shadow: $custom-select-box-shadow, $custom-select-focus-box-shadow;
+    } @else {
+      box-shadow: $custom-select-focus-box-shadow;
+    }
 
     &::-ms-value {
       // For visual consistency with other platforms/browsers,
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 51a453dea..6531a934f 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -518,9 +518,11 @@ $custom-select-indicator:           str-replace(url("data:image/svg+xml;charset=
 $custom-select-border-width:        $input-btn-border-width !default;
 $custom-select-border-color:        $input-border-color !default;
 $custom-select-border-radius:       $border-radius !default;
+$custom-select-box-shadow:          inset 0 1px 2px rgba($black, .075) !default;
 
 $custom-select-focus-border-color:  $input-focus-border-color !default;
-$custom-select-focus-box-shadow:    inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
+$custom-select-focus-width:         $input-btn-focus-width !default;
+$custom-select-focus-box-shadow:    0 0 0 $custom-select-focus-width rgba($custom-select-focus-border-color, .5) !default;
 
 $custom-select-font-size-sm:        75% !default;
 $custom-select-height-sm:           $input-height-sm !default;