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:

This answer might help you: https://stackoverflow.com/a/65241311/10787774 — Jason D, Apr 16 '21 at 19:56

score 7 · Accepted Answer · answered Apr 14 '21 at 20:36

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" };
}

score 5 · Answer 2 · answered Apr 15 '21 at 07:17

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

How to Style Blazor InputFile Component

2 Answers2