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:
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 = "[email protected]" };
}