The color for disabled SELECT is different from INPUT TYPE=TEXT and TEXTAREA

[rmacfadyen]

OS: win10
Browser: chrome 88, firefox 85, opera 73, edge 88

Repo: js fiddle

Picture of the bug in action: picture

The class form-select defines color and background color different from the class form-control. They should be the same.

In v4 a SELECT did not have a specific form-XYZ class of it's own, just form-control. In v5 a SELECT does have a specific form-select class.

[ffoodd]

From your own fiddle, background-color is the same but not color, indeed: @mdo should we use .form-select:disabled color for other inputs, or simply drop it?

From an accessibility perspective, I'd go with two since it has better contrasts. If we go the other way, current disabled select is only 3.95:1, could easily be increased to pass 4.5:1 :)

[rmacfadyen]

@ffoodd I thought you were correct but decided to double check this morning :)

The backgrounds are not the same color. The INPUT TYPE=TEXT and TEXTAREA have a background color of #e9ecef, opacity 1. The SELECT also has a background color of #e9ecef, but its opacity is .7 from the agent style sheet (I only checked chrome).

The .form-control:disabled, .form-control[readonly] rules set the opacity to 1, but not the .form-select rules.

[ffoodd]

Yeah so background-color is the same. I didn't notice opacity differences but only checked in Firefox: maybe something to harmonize in our reboot, too.

[mdo]

This is unique to Chrome, so attaching it into Reboot. See #33127.

[tkrotoff]

The issue is also present with Bootstrap v4.6.0: https://codepen.io/tkrotoff/pen/oNYGooP

Under Chrome 88 macOS, opacity problem:

Under Firefox 85, no opacity problem but the text color is wrong and misaligned:

Under Safari 13.1.2 there are also text color problems: