如何更改<input type =“ file” />样式更改

Question

我想更改<input type="file">的设计，如下图所示。请指导我如何更改此设置。

Answer 1

.upload-file {
display:flex;
align-items: center;
padding: 20px;
heignt: 100px;
border: 1px solid #ddd;
}
.upload-file span {
color: #898989;
flex-grow:1;
}
.upload-button {
background-color: blue;
color:white;
border-radius:50px;
padding:10px 30px;
position:relative;
overflow:hidden;
font-size:14px;
}
.upload-button input[type="file"] {
opacity:0;
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
}

<div class="upload-file">
<span>No file selected.</span>
<button class="upload-button">Browse <input type="file"></button>
</div>