Styling <select> by changing less variables in Luma theme doesn't work as expected

[denistrator]

Preconditions

1. FE theme inherited from Luma

Steps to reproduce

1. In Custom/theme/web/css/source/_theme.less set less variables:
   @select__background: rgba(255, 255, 255, 0.15);
   @select__border: 2px dashed blue;
   @select__height: 50px;
   @select__padding: 15px 40px 15px 15px;
   @select__background-clip: border-box;
2. Compile less

Expected result

Have "select" elements with the styles you set in _theme.less

Actual result

"select" elements have different styles

What causes the issue

web/css/source/_forms.less overrides some "select" styles defined with "@select__" variables

Solution

Remove styles for background, border, height, padding-right from web/css/source/_forms.less and set these styles in _theme.less

[hitesh-wagento]

I am working on this

[DanielRuf]

Shouldn't be this in _extend.less?

[hitesh-wagento]

@DanielRuf No it's not working in _extend.less. We should move change from web/css/source/_forms.less to web/css/source/_theme.less

[sidolov]

Hi @denistrator. Thank you for your report.
The issue has been fixed in #15794 by @hitesh-wagento in 2.3-develop branch
Related commit(s):

• 9fa64255f77609f8b845f3d0b9f503e19a3a6828

The fix will be available with the upcoming 2.3.0 release.

[denistrator]

Hi @sidolov. Can you also have a look at #14999, please? It's a very small issue I opened (it has a PR #15000)