我可以用另一个元素替换Blazor的InputFile组件显示的按钮吗？

html5 • • 问答

我正在使用该元素将图像文件上传到我托管的 Blazor WASM 站点。该组件呈现一个带有“选择文件”字样的按钮。

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

回答

The source code for this component can be found here:
https://github.com/SteveSandersonMS/BlazorInputFile

I studied the code and found that this component is built using the standard Blazor input type.

<input type=file>

Steve shows a way to override the default functionality and style of the button using CSS.

Here is an example I created based on what I found:

<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>
    <InputFile />
    Get me a file!
</div>

It will give you a button that looks like this:

You might pick up more tips by studying his source code further.

以上是我可以用另一个元素替换Blazor的InputFile组件显示的按钮吗？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>