css - 如何为 Blazor InputFile 组件设置样式

Question

我在 dotnet 5 上有一个 Blazor Web Assembly 应用程序。我已将 Microsoft.AspNetCore.Components.Forms.InputFile 控件添加到组件中。这会导致呈现“选择文件”按钮。

如何为按钮应用样式？

我希望样式与引导 btn-primary 类的样式相同。

这是我尝试过的:

从 bootstrap.min.css 中复制样式并在 app.css 中创建一个新样式如下:

input {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff
}

html 是:

<button class="btn btn-primary" @onclick="LoadSamples">Load Samples</button>
<InputFile multiple OnChange="HandleFileSelected" />

结果不是我所希望的:

Answer 1

您可以做的是隐藏输入文件标签并为其创建一个标签，然后将所有样式放在该标签上。在标签上单击将触发绑定(bind)输入的焦点事件。请注意，标签和输入标签的 for 和 id 匹配很重要

示例 html:

<label for="input" class="input-label">Hello</label>
<input id="input" type=file class="sr-only"/>

示例 css:

.sr-only {
  sr-only   position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.input-label {
  padding : 20px;
  background-color : #f55442;
  color: white;
  border-radius: 10px;
  cursor : pointer;   
}