Skip to content
GitLab
Closed
Issue created by Administrator@rootContributor

Custom file LABEL text overlapping neighbouring HTML elements on Firefox

Created by: geryogam

On Firefox 63 (but not on Chrome 70, Edge 44 nor Safari 12), the text in the "custom-file-label" LABEL element seems to invisibly overlap the neighbouring button INPUT element and prevents from clicking on it:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
  </head>
  <body>
    <div class="form-row" style="width: 400px">
      <div class="form-group col">
        <div class="custom-file">
          <input type="file" class="custom-file-input" id="browser">
          <label class="custom-file-label" for="browser">long_filename.txt</label>
        </div>
      </div>
      <div class="form-group col">
        <input type="button" value="Load" class="btn btn-primary">
      </div>
    </div>
  </body>
</html>