How to hide text field in Html File Upload

Question

I am wondering how to hide the text field portion of a standard html file upload tag

for example

Answer 1

input[type="file"] { outline: none; cursor: pointer; position: absolute; top:0; clip: rect(0 265px 22px 155px);  } /* Hide input field */
@-moz-document url-prefix()
  {
  input[type="file"] { clip: rect(0, 265px, 22px, 125px);  } /* Mozilla */
  }
* > /**/ input[type="file"], x:-webkit-any-link { clip: rect(0, 86px, 22px, 0); } /* Webkit */

This will do the same without JavaScript, but requires absolute positioning to use the clip property.

References

• Custom Upload Button
• CSS Wikibook: Clipping

Answer 2

The easiest way as not mentioned in any answer would be to use a label for the input.

<input type="file" name="myFile" id="myFile">
<label for="myFile">Choose your file</label>

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

Using label will be useful because clicking on the label is clicking on the input. This will only work when input's id is equal to label's for attribute.

Answer 3

If you are using jQuery, have a look at this plugin - https://github.com/ajaxray/bootstrap-file-field

It will display the file input field as a bootstrap button and will show selected file names beautifully. Additionally, you can set various restrictions using simple data-attributes or settings in js.
e,g, data-file-types="image/jpeg,image/png" will restrict selecting file types except jpg and png images.

Answer 4

Hello I get inspired by @shiba and here is solution in Angular 9:

    <input type="file" [id]="inputId" class="form-control" [style.display]="'none'"
        [accept]="acceptedDocumentTypes" [multiple]="true" #fileInput
        (change)="fileChange($event)" (blur)="onTouched()">

    <input type="button" class="form-control" value="Browse..." (click)="fileInput.click()"/>

Answer 5

Try adding this css to your input

    font-size: 0;

Answer 6

you can set it's content to empty string like this :

<input type="file" name="somename" size="chars" class="mycustominput"> 

and in your css file :

.mycustominput:after{
    content:""!important;
}