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

我们的目标是创造一个简洁，用纯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

input file的样式很难改变，你可以用js控制一个div触发input file，把样式写在div上，把input file隐藏就可以了；代码如下：

<script>

function clp(){

return $("#File").click()

}

</script>

<button class = "clp" onclick = "clp()">clp</button>

<input type="file" id="File" style="display: none"/>

貌似是不能修改

file

里面自带的内容的

但是你可以做一个你想要的样式，然后将

file

的

opacity

设置成

0

，然后用

position:

absolute宽度；高度，覆盖在你想要的样式上，这样点击那个位置就相当于点击

file

---