Style Input Type File

Styling an input type=file button

Styling file inputs are notoriously difficult, as most browsers will not change the appearance from either CSS or javascript.

Even the size of the input will not respond to the likes of:

<input type="file" style="width:200px">

Instead, you will need to use the size attribute:

<input type="file" size="60" />

For any styling more sophisticated than that (e.g. changing the look of the browse button) you will need to look at the tricksy approach of overlaying a styled button and input box on top of the native file input. The article already mentioned by rm at www.quirksmode.org/dom/inputfile.html is the best one I've seen.

UPDATE

Although it's difficult to style an <input> tag directly, this is easily possible with the help of a <label> tag. See answer below from @JoshCrozier: https://stackoverflow.com/a/25825731/10128619

How to customize input type=file?

You can’t modify much about the input[type=file] control itself.

Since clicking a label element correctly paired with an input will activate/focus it, we can use a label to trigger the OS browse dialog.

Here is how you can do it…

label {   cursor: pointer;   /* Style as you please, it will become the visible UI component. */}
#upload-photo {   opacity: 0;   position: absolute;   z-index: -1;}

<label for="upload-photo">Browse...</label><input type="file" name="photo" id="upload-photo" />

Styling of the input type file not working

We cannot do much customization of the file input. But you have options like below.

Note: I have used Bootstrap for some classes as your code is using it. But if you want you can have custom classes as well.

One disadvantage is that the select file information is also hidden. If you want that you can get that using JavaScript and show below the button.

input[type='file'] {
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<label>
  <input id="Image" type="file" class="form-control-image"         name="image_reference">
  <span class="btn btn-primary">File button</span>
</label>
<br />
<br />
<button class="btn btn-primary form-control-image">Submit</button>

Angular 11 - How to style file input's button with Angular Material

Finally solved this way (Valid for Angular Material and Bootstrap):

I set 3 separated components:

The button that will be visible (It can be an Angular Material one or a Bootstrap one, as seen below)
The file input
The label that will contain the file name

HTML

<div>
  <button #file class="btn btn-light">Examinate</button>
  <div style="display: inline-block">
      <input #myInput formControlName="file"
      id="file" name="file" (change)="postMethod($event.target.files)" type="file"/>
      <p>{{file}}</p>
  </div>
</div>

CSS

With CSS I force the input to be overlay the button, and I set the opacity=0 so that the button is visible.

- Button:

float:left; 
position:absolute; 
z-index:-1;

- Input:

opacity: 0; //Not visible
font-size: 0;
//Button dimensions
width: 90px; 
height: 37px; 
float: left;

- Input (Hover):

cursor: pointer;

- Label:

float: left; 
margin-left: 6px; 
margin-top: 7px;

And this is the final result:

Customized button

How to change the color of the file input button in a form after a file is selected with css?

There are a couple of ways to do this. If you have the complete js code then it would be much easier to answer.
Basically you could use a ternary to determine if the file is uploaded (stored in state), then change the css based on such.

For instance:

const [isUploaded, setIsUploaded] = useState(null)

//Change the upload to true once a file is selected

<label for="file-input" class={isUploaded ? "file-button-after-upload" : "file-button-before-upload">Select File</label>

Angular how to style input type file

You can use the ngf-select directive on a button - check the example from their github doc page: https://jsfiddle.net/danialfarid/xxo3sk41/590

The ng-model file has a name attribute that you can use to display the filename:

<button ngf-select ng-model="picFile" accept="image/*"> Select Picture</button>
File name: {{picFile.name}}