Blazor 服务器组件未将 css 样式应用于 html 元素

Question

我是 Blazor 新手，我们有一个 Blazor 服务器应用程序，使用 InteractiveServer 模式创建了一个组件。 我正在尝试使用自定义 CSS 样式创建一个自动完成的文本框，但某些原因样式根本不受影响。 这是代码的样子，无论我给数据列表什么背景颜色都不会受到影响并显示默认样式。

<style>
datalist {
  position: absolute;
  background-color: white;
  border: 1px solid blue;
  border-radius: 0 0 5px 5px;
  border-top: none;
  font-family: sans-serif;
  width: 350px;
  padding: 5px;

}

option {
  background-color: white;
  padding: 4px;
  color: blue;
  margin-bottom: 1px;
   font-size: 18px;
  cursor: pointer;
}
</style>
<input autocomplete="off" list="" id="input" 
name="browsers" placeholder="Select your fav browser">
<datalist id="browsers">
  <option value="Internet Explorer">Internet Explorer</option>
  <option value="Chrome">Chrome</option>
  <option value="Safari">Safari</option>
  <option value="Microsoft Edge">Microsoft Edge</option>
  <option value="Firefox">Firefox</option>
</datalist>

我尝试添加 !important 到所有 css 属性仍然不起作用。 我们想根据我们的需要定制数据列表。

Answer 1

<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;
    }
}