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

html-css023

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

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

不是路径问题那么很可能是,引入多个css而导致的冲突,再就是看看css文件是否正确,有没有多余的. #或者中文的逗号等

不能生效的地方多了,最可能的地方就是,楼主不会写css。