Dropdown box-shadow

[wselen]

select2-boostrap-3 had a border color and shadown on select2-dropdown

select-bootstrap-5 seems not to have it. Could fix it by now adding: box-shadow: 0 0.5rem 0 0.25rem #0d6efd40

.select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--below {
border-top: 0 solid transparent;
border-top-left-radius: 0;
border-top-right-radius: 0;
box-shadow: 0 0.5rem 0 0.25rem #0d6efd40;
}
the only thing now, the spread at the bottom is a bit large, and with using input-group this needs more adjustments.

[wselen]

fix it using:

/* select2 full border /
.select2-dropdown.select2-dropdown--above {
border-color: #86b7fe;
box-shadow: 0 -0.5rem 0 0.25rem #0d6efd40;
}
.select2-dropdown.select2-dropdown--below{
border-color: #86b7fe;
box-shadow: 0 0.5rem 0 0.25rem #0d6efd40;
}
/ remove box-shadow in search box = nicer*/
.select2-container .select2-dropdown .select2-search .select2-search__field:focus {
box-shadow: none;
}

[apalfrey]

It works... however as you can see in your example image there's an offset at the bottom. Removing that offset causes the 2 box shadows to overlap:

If anybody's able to figure this out so that there's not that double sized offset on one end and the 2 box shadows don't overlap, I'd be more than happy to implement this as it's something I want as well, but could never figure it out without it looking goofy.

[mustanggb]

Slightly more pleasing look.

.select2-container--bootstrap-5 .select2-dropdown {
  overflow: visible;

  &:before {
    z-index: -1;
    content: '';
    position: absolute;
    top: $s2bs5-focus-width;
    bottom: calc(($s2bs5-focus-width + $s2bs5-border-width) * -1);
    left: calc(($s2bs5-focus-width + $s2bs5-border-width) * -1);
    right: calc(($s2bs5-focus-width + $s2bs5-border-width) * -1);
    border: $s2bs5-focus-width solid $input-btn-focus-color;
    border-radius: calc($s2bs5-border-radius + ($s2bs5-border-width * 4));
    border-top: 0 solid transparent;
    @include border-top-radius(0);
  }

  > .select2-results {
    overflow: hidden;
    @include border-radius($s2bs5-border-radius);
    @include border-top-radius(0);
  }
}

One issue I've spotted is that the select box-shadow used for the top has transitions, where as the dropdown border (emulating the box-shadow, but without top) used at the bottom doesn't have transitions.