我正在使用该元素将图像文件上传到我托管的 Blazor WASM 站点。该组件呈现一个带有“选择文件”字样的按钮。
我想用图像(或我自己的文本或其他任何内容)替换此按钮。我尝试使用 CSS 将背景图像设置为我想要使用的图像的 URL,并将按钮的背景颜色设置为“透明”,但这似乎并没有改变任何东西。
我正在使用该元素将图像文件上传到我托管的 Blazor WASM 站点。该组件呈现一个带有“选择文件”字样的按钮。
我想用图像(或我自己的文本或其他任何内容)替换此按钮。我尝试使用 CSS 将背景图像设置为我想要使用的图像的 URL,并将按钮的背景颜色设置为“透明”,但这似乎并没有改变任何东西。
该组件的源代码可以在这里找到: 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>
它会给你一个看起来像这样的按钮:
您可以通过进一步研究他的源代码来获得更多提示。