Серверный компонент Blazor не применяет стили CSS к элементам html

Элементы <datalist> сложно стилизовать в разных браузерах, поскольку они не всегда поддерживают настройки CSS. мы можем добиться аналогичного стиля, реализовав собственный раскрывающийся список автозаполнения.

@using System.Collections.Generic

<style>
    .autocomplete-container {
        position: relative;
        display: inline-block;
        width: 350px;
    }

    .autocomplete-dropdown {
        position: absolute;
        background-color: white;
        border: 1px solid blue;
        border-radius: 0 0 5px 5px;
        width: 100%;
        box-sizing: border-box;
        display: block;
    }

    .autocomplete-option {
        padding: 4px;
        color: blue;
        cursor: pointer;
        font-size: 18px;
    }

        .autocomplete-option:hover {
            background-color: #f0f0f0;
        }
</style>

<div class = "autocomplete-container">
    <input @bind = "inputValue" @oninput = "UpdateFilteredOptions" placeholder = "Select your favorite browser" />

    @if (showOptions)
    {
        <div class = "autocomplete-dropdown">
            @foreach (var option in filteredOptions)
            {
                <div class = "autocomplete-option" @onclick = "() => SelectOption(option)">
                    @option
                </div>
            }
        </div>
    }
</div>

@code {
    private string inputValue = "";
    private bool showOptions = false;
    private List<string> browsers = new List<string> { "Internet Explorer", "Chrome", "Safari", "Microsoft Edge", "Firefox" };
    private List<string> filteredOptions = new List<string>();

    private void UpdateFilteredOptions(Microsoft.AspNetCore.Components.ChangeEventArgs e)
    {
        inputValue = e.Value?.ToString();
        filteredOptions = browsers.Where(browser => browser.Contains(inputValue, StringComparison.OrdinalIgnoreCase)).ToList();
        showOptions = filteredOptions.Any();
    }

    private void SelectOption(string option)
    {
        inputValue = option;
        showOptions = false;
    }
}