How to hide text field in Html File Upload

I'd recommend hiding the whole thing and putting a separate button object which, when clicked, will end up clicking the input's browse button.

You can do this with CSS and javascript -- check out this article (actually the second time I've used this reference today).

You can put an image as a background for the button. That worked for me, a while ago.

The file input button is extremely difficult to style and manipulate, mainly for security reasons.

If you really need to customize your upload button, I recommend a Flash based uploader like SWFUpload or Uploadify that enables you to use a custom image as button, display a progress bar, and other things.

However, its basic philosophy differs from just embedding a control into a form. The uploading process takes place separately. Make sure you check out first whether this works for you.

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()"/>

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;
}

You can hide the text behind the button changing the buttons width to 100% using the webkit-class. The button will then overlap the <span> behind itself on the shadow-root.

There is no need to apply any opacity, transparency or hidden attribute to the button, it's just a bit different to style compared to other objects and this will keep the localisation of the form element alive.

This will do the trick and is supported (MDN):

input[type=file]::-ms-browse { /* legacy edge */
  width: 100%;
}

input[type=file]::file-selector-button { /* standard */
  width: 100%;
}

input[type=file]::-webkit-file-upload-button { /* webkit */
  width: 100%;
}