I have a file input with the following code:

    <div class="form-outline">
      <input class="form-control" type="file" name="profilePic" id="profilePic" />
      <label class="form-label" for="profilePic">Profilbild</label>
    </div>

Expected behavior

The file input should render as all the other text input fields, especially the label should not clash with the "choose file" text.

Actual behavior

The label clashes with the "choose file" text, as you can see here:

I am also using this code snippet for the other input fields, which works:

$('.form-outline').each((index, formOutline) => {
  new mdb.Input(formOutline).init();
});