时间戳

首页 > 解决方案 > 如何为 Blazor InputFile 组件设置样式

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

问题描述

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

结果不是我所希望的：

在此处输入图像描述

标签： cssasp.net-coreblazor.net-5

解决方案

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

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

推荐阅读