How to override opacity in FluentSelect?

[ZnowuJa]

Hi,
My users report that when select component is disabled they barely see the selected text.
With these two as example:

<FluentSelect @bind-Value="@selectValue3" TOption="string" Disabled = "true">
    <FluentOption Value="Option One">Option One</FluentOption>
    <FluentOption Value="Option Two" Selected="true">Option Two</FluentOption>
    <FluentOption Value="Option Three">Option Three</FluentOption>
    <FluentOption Value="Option Four">Option Four</FluentOption>
</FluentSelect>
    <FluentTextField @bind-Value="@textFieldValue" ReadOnly="true" />

I tried to overide .selected and .disabled with following:

    .selected .disabled {
    color: black !important;
    opacity: 1 !important;
}

And it works only for TextField but not fot Select.
I digged into elements in browsers dev tools and even in your githubs repo, but can not find the to make it like readonly for textfield or anyching else to keep readibility of text of selected option with disabled select/change action.

Any hint is welcomed! :)

[rpodevns]

Hi @ZnowuJa - the style of the disabled FluentSelect is defined in the underlying fluent-select web component and I do not believe it can be modified via FluentBlazor styling or with a CSS override. A readonly attribute is applied to the FluentTextField which is why it displays differently. I'll research more and get back to you.

[rpodevns]

The default opacity for the disabled attribute is 0.3 by design. The CSS to override that value is:

fluent-select[disabled] {
    --disabled-opacity: 0.7 !important;
}

[ZnowuJa]

Works like a charm!
Thank you!