<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>input file 樣式更改</title>
<style>
* {
padding: 0;
margin: 0;
}
.uploadImg {
display: inline-block;
/*相對定位*/
position: relative;
width: 140px;
font-size: 16px;
color: #007fcb;
margin-top: 10px;
overflow: hidden;
}
.file {
/*絕對定位*/
position: absolute;
z-index: 100;
/*透明度為0-------關鍵設定*/
opacity: 0;
filter: alpha(opacity=0);
width: 140px;
cursor: pointer;
}
.uploadImg a {
font-size: 16px;
color: #007fcb;
}
</style>
</head>
<body>
<span class="uploadImg">
<input type="file" class="file" size="1" >
<a href="#">上傳圖檔</a>
</span>
</body>
</html>
效果:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsISPrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdsATOfd3bkFGazxCMx8VesATMfhHLlN3XnxCMwEzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5iMkNmYjdjNzUjM4UDNwYWMxIzYjVGNjBTO4kTM1U2Nl9CX4AzLchDMxIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjL2M3Lc9CX6MHc0RHaiojIsJye.png)