如何为 Blazor InputFile 组件设置样式答案

【问题标题】：How to Style Blazor InputFile Component如何为 Blazor InputFile 组件设置样式
【发布时间】：2021-04-14 19:29:51
【问题描述】：

我在 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" />

结果不是我所希望的：

【问题讨论】：

这个答案可能对你有帮助：stackoverflow.com/a/65241311/10787774

标签： css asp.net-core blazor .net-5

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：