怎样用纯HTML和CSS更改默认的上传文件按钮样式

Posted 2023-03-09

参考技术A 我们的目标是创造一个简洁，用纯CSS实现的，在所有浏览器里的样子和布局是一样的上传文件按钮。我们可以这样：
步骤1.创建一个简单的html标记

Upload

第2步：CSS：
有点棘手了
.fileUpload


position:
relative;

overflow:
hidden;

margin:
10px;

.fileUpload
input.upload

position:
absolute;

top:
0;

right:
0;

margin:
0;

padding:
0;

font-size:
20px;

cursor:
pointer;

opacity:
0;

filter:
alpha(opacity=0);

为简单起见，我使用应用了BootstrapCSS样式的按钮
(div.file-upload)。
演示：
上传按钮，显示选中的文件
不幸的是纯CSS的做不到这一点。但是，如果你真的想显示所选文件，下面的javascript代码片段可以帮助你。
JavaScript：
document.getElementById("uploadBtn").onchange
=
function
()


document.getElementById("uploadFile").value
=
this.value;
;
DOM:

Upload