0

I want to replace the InputFile's rectangle with 'attach Icon'. I tried to set the URL of the icon to 'background-image' of InputFile but it had no effect. This only demonstrates how to change the color of InputFile, not exactly what I need.

ArashV
  • 74
  • 1
  • 10
  • 1
    https://stackoverflow.com/a/25825731/437393 Make your input transparent, e.g. opacity = 0, create another control, e.g. label, that will redirect click to your input. Apply some styles to label. – Anonymous Jun 08 '21 at 15:35
  • @Anonymous Worked! Thanks. – ArashV Jun 09 '21 at 06:50

3 Answers3

5

I use something similar for a colour picker.

<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

Brian Parker
  • 11,946
  • 2
  • 31
  • 41
  • Thanks for posting this solution and for sharing that online resource. It looks nice for prototyping. – Jason D Jun 09 '21 at 12:15
2

I think maybe this is what you are looking for.

HTML/Razor code

<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>

In the CSS code above, the file paper-clip.png is installed in wwwroot directory.

The button will look like a transparent paper-clip. In the image below, color changes on hover as well.

enter image description here

Jason D
  • 1,863
  • 2
  • 16
  • 30
0

Try this:

<label for="inputFile" class="btn btn-secondary me-1">
    <InputFile id="inputFile" OnChange="@LoadFiles" class="d-none" />
    Upload File
</label>

CSS Classes from bootstrap, included by default in the Blazor templates.

Jazz.
  • 458
  • 4
  • 12