I want to hide the browse button for users to upload a file. How do I do it?

.fa-cloud-upload {
    position: absolute;
    top: 5%;
}

<label class="file_upload">
     <input type="file" name="uploads" accept="image/*, video/*"/><i class="fa fa-cloud-upload" aria-hidden="true" style="font-size: 85px;"></i>
</label>

I want to hide the browse button for users to upload a file. How do I do it?

.fa-cloud-upload {
    position: absolute;
    top: 5%;
}

<label class="file_upload">
     <input type="file" name="uploads" accept="image/*, video/*"/><i class="fa fa-cloud-upload" aria-hidden="true" style="font-size: 85px;"></i>
</label>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Dec 22, 2017 at 21:59 CDspace 2,6891919 gold badges3232 silver badges3939 bronze badges asked Dec 22, 2017 at 21:16 RyanRyan 311 silver badge55 bronze badges 9

• Your css is targeting the icon after the input, not the input itself, which you can hide with a display none. – Taplar Commented Dec 22, 2017 at 21:18
• How can I hide it? – Ryan Commented Dec 22, 2017 at 21:18
• Either inline a style="display:none" or give it css rule that does effectively the same thing. – Taplar Commented Dec 22, 2017 at 21:19
• Bare in mind that hiding the upload button does not prevent a file from being uploaded all the way. – dGRAMOP Commented Dec 22, 2017 at 21:19
• You want to hide or disable it? – Aniket Sahrawat Commented Dec 22, 2017 at 21:19

 |  Show 4 more ments

7 Answers 7

Sorted by: Reset to default 6

You can just hide the input and use label to open the file see the example bellow:

<label for="myInputFile">
  <img src="https://cdn1.iconfinder./data/icons/hawcons/32/699329-icon-57-document-download-128.png">
  <input type="file" name="myInputFile" id="myInputFile" style="display:none;" />
</label>

You can just hide the input and trigger it when user clicks the icon:

Click the image to select file
<br>
<img src="http://icons.iconarchive./icons/custom-icon-design/pretty-office-9/256/open-file-icon.png" width="50" height="50" onclick="document.getElementById('mycustomid').click();" style="cursor: pointer;">
<input type="file" id="mycustomid" style="visibility: hidden;" />

Simpy add display: none; to hide the input element.

input {
   display: none;
}

Just hide your file input field.

label input[ type="file" ] {
  display: none;
}

<label>
  <input type="file" />
  <span>Icon</span>
</label>

Hide the input with display:none

.fa-cloud-upload {
  position: absolute;
  top: 5%;
}
.file_upload input[type="file"]{display:none}

<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<label class="file_upload">
  <input type="file" name="uploads" accept="image/*, video/*"/>
  <i class="fa fa-cloud-upload" aria-hidden="true" style="font-size: 25px;"></i>
</label>

You can do something like this. Your Font-Awesome icon should appears where you try it in your environnement. :

    .file_upload {
      position: relative;
      overflow: hidden;
      display: inline-block;
    }
    
    .btn {
      border: 0px solid gray;
      color: blue;
      background-color: white;
      padding: 8px 20px;
      border-radius: 8px;
      font-size: 20px;
      font-weight: bold;
    }
    
    .file_upload input[type=file] {
      font-size: 100px;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;

    }

<div class="file_upload">
  <button class="btn"><i class="fa fa-cloud-upload" aria-hidden="true" style="font-size: 15px;">X</i></button>
  <input type="file" name="uploads" accept="image/*, video/*"/>
</div>

.fa-cloud-upload {
    position: absolute;
    top: 5%;
}

<label class="file_upload">
     <input type="file" name="uploads" accept="image/*, video/*"/><i class="fa fa-cloud-upload" aria-hidden="true" style="font-size: 85px;"></i>
</label>