在移动web开发过程中，常常会用到input file这控件，但css不能修改其样式往往让开发者很头疼，直接把他放到页面上又不美观；
下面介绍的方法，可以将该控件的显示样式替换成一个图标；
该方法主要思路是：在带有input
file的表单外面增加一个<a>标签，设置<a>标签的背景，并用透明度隐藏input标签。
在页面上显示的效果如下图，经测试ios5+，android2.3+的自带浏览器都较好的兼容该效果。
代码如下：
HTML
<a class="fileStyle" href="javascript:;">
<input class="“upload_file"" id="addfile" type="file" accept="image/*" />
</a>
|
CSS
.messagePlan .imgUpload .fileStyle {
width: 60px;
height: 60px;
background: url(../../images/addImg.jpg) #fff center center no-repeat;
float: left;
border: 2px dashed #ccc;
border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
cursor: pointer;
overflow:hidden;
display:block;
position:relative;
}
.upload_file{
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
top: 0;
left: 0;
bottom:0;
}
|
如何修改file控件,布布扣,bubuko.com
如何修改file控件
原文：http://www.cnblogs.com/aTeddy/p/3643095.html
