<style>
.btn{position: relativeoverflow: hiddenmargin-right: 4pxdisplay:inline-block*display:inlinepadding:4px 10px 4pxfont-size:14pxline-height:18px*line-height:20pxcolor:#ffftext-align:centervertical-align:middlecursor:pointerbackground-color:#5bb75bborder:1px solid #ccccccborder-color:#e6e6e6 #e6e6e6 #bfbfbfborder-bottom-color:#b3b3b3-webkit-border-radius:4px-moz-border-radius:4pxborder-radius:4px}
.btn input {position: absolutetop: 0 right: 0margin: 0border: solid transparentopacity: 0filter:alpha(opacity=0) cursor: pointer}
</style>
<div id="up_btn" class="btn">
<span>添加图片</span>
<input id="photoimg" type="file" name="photoimg">
</div>
我们的目标是创造一个简洁，用纯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
首先用PHOTOSHOP做出你想要的样式的图片。具体代码，我就把我以前写的CSS样式表发给你看看，仅供参考。 .btn1 {height: 20px
width: 60px
background-image: url(img/search.jpg)
background-repeat: no-repeat
background-position: center center
background-color: transparent
border-top-style: none
border-right-style: none
border-bottom-style: none
border-left-style: none
}你只需要把背景图片更改成你的图片就可以了（需要注意图片文件和网页文件保存的位置）。
