Blazor 中的自定義 InputFile

Question

我想用“附加圖標”替換 InputFile 的矩形。 我嘗試將圖標的 URL 設置為 InputFile 的“背景圖像”，但沒有效果。 這僅演示了如何更改 InputFile 的顏色，而不是我需要的。

Answer 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

Answer 2

我想也許這就是你要找的。

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 目錄下。

該按鈕看起來像一個透明的回形針。 在下圖中，hover 上的顏色也會發生變化。