Blazor InputSelect问题：选中元素后如何保留其文本颜色？

问题原因 #

你遇到的现象核心是原生select元素的样式生效逻辑导致的：

• 给<option>设置的style="color:red"仅在下拉菜单展开时对当前选项生效；当选项被选中后，显示的文本由外层的<select>元素（Blazor InputSelect渲染后的原生DOM节点）控制，而非选中的<option>本身。
• 如果你使用了Bootstrap的form-select类，它的默认样式会给select设置color: #212529（黑色），这会直接覆盖option的颜色设置，导致选中后文本强制变回黑色。

解决办法 #

方法1：通过Blazor绑定事件动态修改select颜色

利用Blazor的事件绑定和ElementReference，根据选中值动态设置外层select的文本颜色：

<InputSelect id="id" class="form-select" 
             @bind-Value=@SelectedItem 
             @onchange="UpdateSelectColor"
             @ref="selectRef">
    @for (var item = 0; item < 5; item++)
    {
        if (item > 1)
        {
            <option style="color:red" value="@item">@item</option>
        }
        else
        {
            <option value="@item">@item</option>
        }
    }
</InputSelect>

@code {
    private int SelectedItem { get; set; }
    private ElementReference selectRef;

    private async Task UpdateSelectColor(ChangeEventArgs e)
    {
        var selectedValue = int.Parse(e.Value.ToString());
        var targetColor = selectedValue > 1 ? "red" : "";
        await selectRef.SetAttributeAsync("style", $"color: {targetColor};");
    }
}

方法2：使用CSS类绑定（更简洁）

先定义CSS类：

.red-text { color: red !important; }
.default-text { color: inherit; }

然后在组件中根据选中值动态切换类：

<InputSelect id="id" 
             class="form-select @(SelectedItem > 1 ? "red-text" : "default-text")" 
             @bind-Value=@SelectedItem>
    @for (var item = 0; item < 5; item++)
    {
        if (item > 1)
        {
            <option class="red-text" value="@item">@item</option>
        }
        else
        {
            <option value="@item">@item</option>
        }
    }
</InputSelect>

@code {
    private int SelectedItem { get; set; }
}

注：加!important是为了覆盖Bootstrap form-select的默认颜色样式，如果未使用Bootstrap可以去掉。

内容的提问来源于stack exchange，提问作者mawagi