input file beautification

1. The basic idea of ​​input file beautification is to set the style of <input type="file" /> to opacity: 0; that is, the transparency is zero.

 

2. I recommend a method:

<input type="file" id="file" class="input-file" />
<label for="file" >Select file</label>

 In this way, clicking on the <label> label will also trigger the upload of the file. Then there is the question of yes.

 

3. Clear the placeholder of <input>.

.input-file {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

In this way, there is no placeholder, and then you can display the upload button by beautifying the <label>.