diff --git a/src/BootstrapBlazor/Components/Select/Select.razor.scss b/src/BootstrapBlazor/Components/Select/Select.razor.scss
index d0fc99a2117..dddc9020db6 100644
--- a/src/BootstrapBlazor/Components/Select/Select.razor.scss
+++ b/src/BootstrapBlazor/Components/Select/Select.razor.scss
@@ -11,7 +11,6 @@
     --bb-select-padding: #{$bb-select-padding};
     --bb-select-append-width: #{$bb-select-append-width};
     --bb-select-append-color: #{$bb-select-append-color};
-    --bb-select-append-right: 0;
 }
 
 .select:not(.cascade) .dropdown-menu {
@@ -126,6 +125,8 @@
 
 .select,
 .auto-complete {
+    --bb-select-append-right: #{$bb-select-append-right};
+
     .clear-icon {
         position: absolute;
         height: 100%;
diff --git a/src/BootstrapBlazor/wwwroot/scss/variables.scss b/src/BootstrapBlazor/wwwroot/scss/variables.scss
index 69350e8dd6e..685c14f8ad7 100644
--- a/src/BootstrapBlazor/wwwroot/scss/variables.scss
+++ b/src/BootstrapBlazor/wwwroot/scss/variables.scss
@@ -534,6 +534,7 @@ $bb-select-search-icon-top: 18px;
 $bb-select-search-height: 52px;
 $bb-select-append-width: 30px;
 $bb-select-append-color: #c0c4cc;
+$bb-select-append-right: 0;
 
 // Multiple-Select
 $bb-multi-select-min-height: 35px;