diff --git a/contribs/gmf/src/import/import.scss b/contribs/gmf/src/import/import.scss
index fd4c96a1d6dd..9819bb6d33c7 100644
--- a/contribs/gmf/src/import/import.scss
+++ b/contribs/gmf/src/import/import.scss
@@ -2,9 +2,6 @@
 @import "~gmf/sass/typeahead.scss";
 
 gmf-importdatasource {
-  input[type=file] {
-    display: none;
-  }
 
   .gmf-importdatasource-url-form-group {
     background-color: #fff;
diff --git a/contribs/gmf/src/import/importdatasourceComponent.html b/contribs/gmf/src/import/importdatasourceComponent.html
index 22144e0bb307..22438671cc38 100644
--- a/contribs/gmf/src/import/importdatasourceComponent.html
+++ b/contribs/gmf/src/import/importdatasourceComponent.html
@@ -15,26 +15,10 @@
     ng-show="$ctrl.mode === 'Local'">
     <div class="form-group">
       <div class="input-group">
-        <input
-          name="file"
-          type="file"
-          required
-        />
-        <input
-          class="form-control"
-          placeholder="{{'No file' | translate}}"
-          readonly
-          type="text"
-          value="{{$ctrl.fileNameAndSize}}"
-          ng-click="$ctrl.browse()"
-        />
-        <span class="input-group-btn">
-          <button
-            class="btn btn-default"
-            type="button"
-            ng-click="$ctrl.browse()"
-            translate>Browse</button>
-        </span>
+        <div class="custom-file">
+          <input type="file" class="custom-file-input" required>
+          <label class="custom-file-label" translate>No file</label>
+        </div>
       </div>
     </div>
     <div class="form-group">
diff --git a/contribs/gmf/src/import/importdatasourceComponent.js b/contribs/gmf/src/import/importdatasourceComponent.js
index 2d5951d805db..d7f791d0311a 100644
--- a/contribs/gmf/src/import/importdatasourceComponent.js
+++ b/contribs/gmf/src/import/importdatasourceComponent.js
@@ -266,6 +266,13 @@ class Controller {
       const fileInput = /** @type {HTMLInputElement} */(this.fileInput_[0]);
       const files = fileInput.files;
       this.file = files && files[0] ? files[0] : null;
+
+      if (this.file) {
+        this.hasError = false;
+        // update the label
+        $(fileInput).next('.custom-file-label').html(this.fileNameAndSize);
+      }
+
       this.scope_.$apply();
     });
   }
@@ -316,14 +323,6 @@ class Controller {
     }
   }
 
-  /**
-   * Triggers a 'click' on the "Browse" button.
-   */
-  browse() {
-    this.hasError = false;
-    this.element_.find('input[type=file][name=file]').click();
-  }
-
   /**
    * Connect to given online resource URL.
    */
diff --git a/contribs/gmf/src/map/mousepositionComponent.html b/contribs/gmf/src/map/mousepositionComponent.html
index 426a599aa1a0..c4b72dc6a1b5 100644
--- a/contribs/gmf/src/map/mousepositionComponent.html
+++ b/contribs/gmf/src/map/mousepositionComponent.html
@@ -1,7 +1,7 @@
 <div class="btn-group dropup">
-  <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
     <span class="gmf-mouseposition-control-target"></span>
-  </a>
+  </button>
   <ul class="dropdown-menu dropdown-menu-right" role="menu">
     <li class="dropdown-header" translate>Coordinate systems</li>
     <li ng-repeat="projitem in ::ctrl.projections">