A Pen by Victoria Ruiz Schulze.

index.html

<div class="field">
  <label for="new_file">Using an input field - This will show the filename: </label>
  <input type="text" name="new_file" value="" size="40" class="file_input_replacement" placeholder="Select file">
  <input type="file" name="uploaded_file" class="file_input_with_replacement">
</div>

<div class="field">
  <label for="new_file">Using a button: </label>
  <button type="text" class="file_input_replacement">Upload a file here</button>
  <input type="file" name="uploaded_file" class="file_input_with_replacement">
</div>

Replace-input[type=file]-with-regular-input.markdown

Replace input[type=file] with regular input

This will allow you to customize the format when uploading a file in a form

A Pen by Victoria Ruiz Schulze on CodePen.

License.

script.js

$(function(){
        
        $('.file_input_replacement').click(function(){
            //This will make the element with class file_input_replacement launch the select file dialog.
            var assocInput = $(this).siblings("input[type=file]");
            console.log(assocInput);
            assocInput.click();
        });
        $('.file_input_with_replacement').change(function(){
            //This portion can be used to trigger actions once the file was selected or changed. In this case, if the element triggering the select file dialog is an input, it fills it with the filename
            var assocInput = $(this).siblings("input.file_input_replacement");
            if (assocInput.length() > 0) {
              var filename = ($(this).val()).replace(/^.*[\\\/]/, '');
              assocInput.val(filename);
            }
        });
    });

style.css

input.file_input_with_replacement {display: none;}
input.file_input_replacement {
  background: #e2e2e2;
  padding: 10px;
  border: none;
}
button.file_input_replacement {background: #252525; color: #fff; padding: 7px 10px; border-radius: 20px; border: none; }