How to Style Blazor InputFile Component

Question

I have a Blazor Web Assembly app on dotnet 5. I've added a Microsoft.AspNetCore.Components.Forms.InputFile control to a component. This causes a "Choose Files" button to be rendered.

How can I apply a style to the button?

I'd like the style to be the same as for a bootstrap btn-primary class.

Here's what I tried:

Copied the style from bootstrap.min.css and created a new style in app.css as follows:

input {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff
}

The html is:

<button class="btn btn-primary" @onclick="LoadSamples">Load Samples</button>
<InputFile multiple OnChange="HandleFileSelected" />

The result was not what I'd hoped for:

Answer 1

All you need is the hidden attribute on the input file tag.

Here are two simple ways to do this.

1. The easiest by far is to put the input field inside the label. Then you don't need to use the for and id attributes. Style the label how you like and put hidden on InputFile. Done!

    <label class="load-files-label">Chooses file to upload.
      <InputFile hidden
                 OnChange="@LoadFiles"
                 multiple accept=".png,.jpg,.jpeg"/>
    </label>

2. If for some reason you can't nest the InputFile in the label, then use for on the label and id on the input.

    <label for="fileupload"
           class="load-files-label">Choose files to upload.</label>
    <InputFile id="fileupload"
               hidden
               OnChange="@LoadFiles"
               multiple
               accept=".png,.jpg,.jpeg"/>

In both cases just use hidden on the InputFile tag.

My Super Awesome styling :)

.load-files-label {
  padding: 20px;
  background-color: #f55442;
  color: white;
  border-radius: 10px;
  cursor: pointer;
  margin: 4rem;
  display: block;
}

Answer 2

What you could do is to hide the input file tag and create a label for it and then place all your styling on that label instead. Onclick on a label will trigger the focus event for the bound input. Notice that it is important that the for and id of the label and input tag matches

Example html:

<label for="input" class="input-label">Hello</label>
<input id="input" type=file class="sr-only"/>

Example css:

.sr-only {
  sr-only   position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.input-label {
  padding : 20px;
  background-color : #f55442;
  color: white;
  border-radius: 10px;
  cursor : pointer;   
}

Answer 3

The <InputFile> component produces a standard input file html element. So the styling is the same for that. There's various styling examples out on the web - search "css styling input file".

I just tested it with Bootstrap as included with Blazor :

<EditForm Model="model">
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
        </div>
        <div class="custom-file">
            <InputFile class="custom-file-input"></InputFile>
            <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
        </div>
    </div>
    <InputFile></InputFile>
</EditForm>
@code {
// here just to provide a valid model as I had it in the page already from answering another question!
    public class Model
    {
        public string Email { get; set; }
    }

    private Model model { get; set; } = new Model() { Email = "me@you.com" };
}