我可以用另一个元素替换Blazor的InputFile组件显示的按钮吗？ [英] Can I replace the button displayed by Blazor's InputFile component with another element?

问题描述

我使用元素将图像文件上载到我托管的Blazor WASM站点。该组件会呈现一个按钮，上面有"选择文件"字样。

我想用图像(或我自己的文本或任何其他内容)替换此按钮。我曾尝试使用CSS将背景图像设置为我要使用的图像的URL，并将按钮的背景颜色设置为&qot；透明&q；，但这似乎没有任何改变。

推荐答案

该组件的源代码可以在这里找到： https://github.com/SteveSandersonMS/BlazorInputFile

我研究了代码，发现此组件是使用标准Blazor输入类型生成的。

<input type=file>

Steve展示了一种使用CSS覆盖按钮默认功能和样式的方法。

以下是我根据发现创建的示例：

<style>
    .file-input-zone {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: blue;
        color: white;
        cursor: pointer;
        position: relative;
        width: 120px;
        height: 30px;
    }

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

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

<div class="file-input-zone">
    <InputFile />
    Get me a file!
</div>

它将显示如下所示的按钮：

您可以通过进一步研究他的源代码获得更多提示。

这篇关于我可以用另一个元素替换Blazor的InputFile组件显示的按钮吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！