<select> with form-control have background color as :read-only

[DannyFeliz]

OS: Windows 10 Pro
Browser: Chrome 90
Bootstrap version: 5.0.0
How to reproduce

After update from the beta to the stable version of bootstrap I'm experiencing this issue where the select and the options have a gray background instead of white.

It's marking the select as readonly

[mdo]

@ffoodd Perhaps something is off with the :read-only selector? We didn't have this with [readonly] as far as I know.

Fwiw though, from the comments in #33642, <select>s should use .form-select and not .form-control.

[alpadev]

Yeah we shouldn't have used :read-only as a replacement for [readonly. [readonly] explicitely matches against the html attribute, but :read-only works frankly different.

The specification defines it like this (albeit a little counter-intuitive) :

The :read-write pseudo-class must match any element falling into one of the following categories, which for the purposes of Selectors are thus considered user-alterable: [SELECTORS]

• input elements to which the readonly attribute applies, and that are mutable (i.e. that do not have the readonly attribute specified and that are not disabled)
• textarea elements that do not have a readonly attribute, and that are not disabled
• elements that are editing hosts or editable and are neither input elements nor textarea elements

The :read-only pseudo-class must match all other HTML elements.

[alecpl]

Looks like selects are :read-only because they cannot be edited, indeed. On the other hand the documentation says selects should use .form-select.

So, maybe we should just acknowledge that using .form-control on a select has no sense. The same as it does not work on checkboxes. The same as it does not make sense to use readonly attribute on a select.

Of course, you can just revert the change as well.

[coharishreddy]

[readonly] has side effects when readonly attribute is used inappropriately on any HTML element which doesn't support it. We can Reset :read-only styles applied to selects which has from-control class
select.form-control:read-only { background-color: initial; border-color: initial; }

[alpadev]

Maybe I wasn't clear with what I said earlier. My proposal is not, not to use :read-only in general. But simply substituting [readonly] with :read-only isn't the correct approach IMO, as it has a different meaning.

According to the spec :read-only also applies to disabled inputs which makes combining it with :disabled sort of unnecessary. But they have been left in the code https://github.com/twbs/bootstrap/pull/33642/files.

Another issue with :read-only is that browsers implement it differently. Take Firefox for example, they implement the spec as it was defined.

So that's how the file inputs look now:

[alecpl]

Oh, I missed the file input issue. This actually might be the biggest reason to not use :read-only.

[ffoodd]

Agreed, I mentionned the difference between the two selectors in the PR but didn't think it'd match selects and file inputs.

I'd be in favor of reverting this PR — otherwise we need to be more restrictive with the pseudo-class to avoid clashes with select and file input, and I don't think it worth it.

[mdo]

Let's revert @ffoodd :)

[lacutah]

Notes from the field to consider - (in Firefox), this also causes problems with custom (read third-party) composite controls as they also use the .form-control class for integration / consistency, and because they're not input elements suddenly all appeared disabled.

[scayze]

The very same issue also happens when using form-control with buttons

As opposed to with select, with buttons i cannot substitute form-control with something alike form-select, without it causing layout issues