Blazor 中的自定义 InputFile答案

【问题标题】：Custom InputFile in BlazorBlazor 中的自定义 InputFile
【发布时间】：2021-08-25 15:05:03
【问题描述】：

我想用“附加图标”替换 InputFile 的矩形。我尝试将图标的 URL 设置为 InputFile 的“背景图像”，但没有效果。 This 只演示了如何更改 InputFile 的颜色，并不是我需要的。

【问题讨论】：

stackoverflow.com/a/25825731/437393 使您的输入透明，例如opacity = 0，创建另一个控件，例如标签，这会将点击重定向到您的输入。将一些样式应用于标签。
@Anonymous 工作！谢谢。

【解决方案1】：

我在颜色选择器中使用了类似的东西。

<label for="fileinput" class="label-wrapper">
    <span class="oi oi-paperclip"></span>
    <InputFile id="fileinput" class="custom-input-hide" />
</label>

<style>
    .label-wrapper:hover {
        cursor: pointer;
    }

    .custom-input-hide {
        width: 0;
        height: 0;
        overflow: hidden;
    }
</style>

BlazorRepl

【讨论】：

感谢您发布此解决方案并分享该在线资源。它看起来很适合原型设计。

【解决方案2】：

我想这也许就是你要找的。p>

HTML/Razor 代码

<div class="file-input-zone">
    <InputFile />
</div>

CSS

<style>
.file-input-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: black;
    cursor: pointer;
    position: relative;
    width: 120px;
    height: 120px;
    background-image: url('paper-clip.png');
}

    .file-input-zone:hover {
        background-color: lightblue;
    }

    .file-input-zone input[type=file] {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }
</style>

在上面的 CSS 代码中，文件 paper-clip.png 安装在 wwwroot 目录中。

按钮看起来像一个透明的回形针。在下图中，悬停时颜色也会发生变化。

【讨论】：