Remove "choose file" from input

Question

I could not figure out how to remove the "choose file" from the input button. I just want the user to be able to drag or upload the file directly by clicking on the image. This is what I have so far : here

<div class="popup-wrapper popup-wrapper-3">
  <div class="popup">
    <div class="popup-close">x</div>
    <div class="popup-content">
      <h2>Upload Your Resume</h2>
      <p class="small-text">Upload your resume to complete the job application
      </p>
      <p class="sub">
        <label>Resume:</label>
        <input accept=".doc, .docx, .pdf" type="file" display="none" placeholder="" name="resume">
        <img src="../images/search/apply.gif">
        <p class="small-text">Click to browse the file
        </p>
        <button class="button vlose-button" type="button">Apply Now</button>
      </p>
    </div>
  </div>
</div>

Possible duplicate of https://stackoverflow.com/questions/5138719/change-default-text-in-input-type-file — Erfan Mola, Aug 01 '19 at 20:02

score 0 · Answer 1 · answered Aug 01 '19 at 20:10

Welcome! Have you tried with other browsers? FireFox doesn't show that message.

Another thing (maybe more important), the input type="file" doesn't have placeholder attribute, and there is no "display" attribute. If you want to use custom attributes you should use the data-* structure. If you want to style it (i.e hide the input) you should do that with CSS.

You can read more about this here.

Hope that will point you to the right direction and Good luck!

Remove "choose file" from input

1 Answers1