如何设置 Blazor InputFile 组件的样式

Question

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

如何将样式应用于按钮？

我希望样式与 bootstrap 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

该<InputFile>组件生成一个标准输入文件 html 元素。所以样式是相同的。网络上有各种样式示例 - 搜索“css 样式输入文件”。

我刚刚使用 Blazor 附带的 Bootstrap 对其进行了测试：

<EditForm Model="model">
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
        </div>
        <div class="custom-file">
            <InputFile class="custom-file-input"></InputFile>
            <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
        </div>
    </div>
    <InputFile></InputFile>
</EditForm>
@code {
// here just to provide a valid model as I had it in the page already from answering another question!
    public class Model
    {
        public string Email { get; set; }
    }

    private Model model { get; set; } = new Model() { Email = "me@you.com" };
}

Answer 2

您可以做的是隐藏输入文件标签并为其创建一个标签，然后将所有样式放在该标签上。Onclick 标签将触发绑定输入的焦点事件。请注意，重要的是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;   
}