Styling input photo

public/profil_edit.js

@@ -17,4 +17,23 @@ function validateLocationEdit() {
         return false;
     }
     return true;
-}
+}
\ No newline at end of file
+
+var inputs = document.querySelectorAll( '.input-photo' );
+Array.prototype.forEach.call( inputs, function( input ) {
+    var label	 = input.nextElementSibling,
+        labelVal = label.innerHTML;
+
+    input.addEventListener( 'change', function( e ) {
+        var fileName = '';
+        if( this.files && this.files.length > 1 )
+            fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
+        else
+            fileName = e.target.value.split( '\\' ).pop();
+
+        if( fileName )
+            label.querySelector( '.input-photo-result' ).innerHTML = fileName;
+        else
+            label.innerHTML = labelVal;
+    });
+});
\ No newline at end of file

public/style.css

@@ -289,6 +289,51 @@ input:checked + .slider:before {
     border-radius: 50%;
 }
 
+.input-photo {
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+}
+
+.input-photo + label {
+    display: inline-block;
+    cursor: pointer;
+    width: 100%;
+    line-height: 33px;
+}
+
+.input-photo + label > .input-photo-button {
+    color: black;
+    float: right;
+    font-size: 0.75em;
+    width: 27%;
+    background-color: #ccc;
+    text-align: center;
+}
+
+.input-photo + label > .input-photo-result {
+    float: left;
+    font-size: 0.75em;
+    width: 70%;
+    height: 32px;
+    padding-left: 5px;
+    border: solid 1px black;
+    margin-right: 2px;
+}
+
+.input-photo:focus + label > .input-photo-button,
+.input-photo + label > .input-photo-button:hover {
+    background-color: #999aa3;
+}
+
+.input-photo:focus + label > .input-photo-button {
+    outline: 1px dotted #000;
+    outline: -webkit-focus-ring-color auto 5px;
+}
+
 /* ------------------------- ORDER -------------------------*/
 
 .small-circle {

src/view/profil_edit.php

@@ -29,7 +29,15 @@
                     <div class="col-4">
                         <h3>Update profile picture</h3>
                         <form action="#">
-                            <input type="file" name="photo" accept="image/*">
+                            <input id="photo" type="file" name="photo" accept="image/*" class="input-photo">
+                            <label for="photo">
+                                <div class="input-photo-result">
+
+                                </div>
+                                <div class="input-photo-button">
+                                    Browse...
+                                </div>
+                            </label>
                         </form>
                     </div>
                 </div>

src/view/profil_edit_location.php

@@ -36,7 +36,8 @@
                         <?php foreach ($location as $data) : ?>
                             <tr>
                                 <td><b><?=$no++?></b></td>
-                                <td><b><?=$data['location']?></b></td>
+                                <td><b><?=$data['location']?></b><br>
+                                    <input type="text" style="width: 100%; line-height: 30px; font-size: medium; display: block;"></td>
                                 <td style="text-align: center">
                                     <a class="action-edit" href="#"></a>
                                     <a class="action-delete" href="/main/profil/location/delete?u=<?=$id?>&name=<?=$data['location']?>"></a>