[Resolved : Styling <select> by changing less variables in Luma theme doesn't work as expected #15608]

Author: hitesh-wagento

app/design/frontend/Magento/luma/web/css/source/_forms.less

@@ -91,11 +91,7 @@
     .select-styling() {
         .lib-css(appearance, none, 1);
         appearance: none;
-        background: @select__background url('../images/select-bg.svg') no-repeat 100% 45%;
         background-size: 30px 60px;
-        border: 1px solid @border-color__base;
-        height: 32px;
-        padding-right: 25px;
         text-indent: .01em;
         text-overflow: '';
 

app/design/frontend/Magento/luma/web/css/source/_theme.less

@@ -166,6 +166,13 @@
 //  Forms
 //  ---------------------------------------------
 
+
+//  Select
+@select__background: @form-element-input__background url('../images/select-bg.svg') no-repeat 100% 45%;
+@select__border: 1px solid @border-color__base;
+@select__height: 32px;
+@select__padding: 4px 25px @indent__xs @indent__s;
+
 //  Form fieldset
 @form-fieldset-legend__font-size: 18px;
 @form-fieldset-legend__font-weight: @font-weight__light;

lib/web/css/source/lib/variables/_forms.less

@@ -121,7 +121,7 @@
 @select__disabled__font-style: @form-element-input__disabled__font-style;
 
 //  Focus state
-@select__focus__background: @form-element-input__focus__background;
+@select__focus__background: false;
 @select__focus__border: @form-element-input__focus__border;
 @select__focus__color: @form-element-input__focus__color;
 @select__focus__font-style: @form-element-input__focus__font-style;