在移动web开发过程中,常常会用到input file这控件,但css不能修改其样式往往让开发者很头疼,直接把他放到页面上又不美观;
下面介绍的方法,可以将该控件的显示样式替换成一个图标;
 
该方法主要思路是:在带有input file的表单外面增加一个<a>标签,设置<a>标签的背景,并用透明度隐藏input标签。
在页面上显示的效果如下图,经测试ios5+,android2.3+的自带浏览器都较好的兼容该效果。
 
 
 
代码如下:
HTML
  HTML
 
<a class="fileStyle" href="javascript:;">
<input class="“upload_file&quot;" id="addfile" type="file" accept="image/*" />
</a>
 
CSS
  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控件的更多相关文章

  1. File控件选择图片的时候在Html5下马上预览

    页面HTML <div> <img src="@pic.Path" id="img" style="width:200px;heig ...

  2. File控件杂谈

    我们通常使用<input type='file'/>来实现网页中文件上传功能,用户可以通过点击file控件选择本地文件,当我们提交包含该控件的表单时,浏览器会向服务器发送用户选中的文件. ...

  3. 美化 input type=file控件

    大家都知道input的type=file控件默认样式是不能修改的 可以通过一个小技巧处理下 html: <a href="javascript:;" class=" ...

  4. css控制file控件透明 漂浮

    css控件透明属性设置IE firefor设置方法<STYLE type=text/css>.upfilefield{position:absolute; FILTER: alpha(op ...

  5. 混合开发 webview 中file 控件 点击后无反应解决方法

    最近在做个项目 ,需要 使用 file 控件上传 图片到服务器 ,在手机浏览器中 可以正常选择照片,但是放到 android 应用中的webview中,file 控件点击后就没有反应. 百度了一番后, ...

  6. input的file 控件及美化

    在一些网站进行上传时,当单击了“浏览”按钮之后会弹出[选择文件]的对话框.想要实现这一功能,用input的file控件来实现就好啦~ <!doctype html> <html la ...

  7. 怎么清除file控件的文件路径

    还记得上次做一个文件上传,后来测试告诉我说,如果我要是不选择文件了呢?该怎么办?我说:简单啊,做一个取消按钮不就完事了吗!然后我就想一个file空间做一个取消是多么简单的事,用js处理可是想怎么样就怎 ...

  8. 为什么Jquery对input file控件的onchange事件只生效一次

    今天在做jquery对input file控件的onchange事件进行监听,就一直只生效一次,不知道Jquery为什么对file控件没有做到每次改变触发onchange事件的效果,但是还是有好几种解 ...

  9. Winform中修改WebBrowser控件User-Agent的方法(已经测试成功)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...

随机推荐

  1. bootstrap——下拉菜单右对齐

    通过向 .dropdown-menu 添加 .pull-right 类来向右对齐下拉菜单. Bootstrap默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度. 为 .dropd ...

  2. [转] dpkg-deb命令

    点击此处阅读原文 function addLink() { var body_element = document.getElementsByTagName('body')[0]; var selec ...

  3. VS2013 添加已有文件夹

    1.将现有项目或文件夹拷贝到指定目录下 2.解决方案右上有个显示所有文件的按钮 然后选中所有要添加的文件,右击

  4. 【转】The import javax.servlet cannot be resolved

    转载地址:http://www.2cto.com/kf/201212/176868.html 今天将别人的项目导入eclipse之后,出现了“The import javax.servlet cann ...

  5. spring mvc(注解)上传文件的简单例子

    spring mvc(注解)上传文件的简单例子,这有几个需要注意的地方1.form的enctype=”multipart/form-data” 这个是上传文件必须的2.applicationConte ...

  6. <<Windows via C/C++>>学习笔记 —— 线程优先级【转】

    转自:http://www.cnblogs.com/wz19860913/archive/2008/08/04/1259807.html 每个线程都有一个“优先级”,范围是0-31,0为最低优先级,3 ...

  7. Cheatsheet: 2016 05.01 ~ 05.31

    Other Awesome Go - A curated list of awesome Go frameworks, libraries and software Visual Studio Cod ...

  8. Mac 下 PostgreSQL 的安装与使用

    在 mac 下,可以利用 homebrew 直接安装 PostgreSQL: 1 brew install postgresql -v 稍等片刻,PostgreSQL 就安装完成.接下来就是初始数据库 ...

  9. Kinect外包团队(长年承接微软Kinect体感项目外包,有大型Kinect案例)

    承接Kinect体感企业项目.游戏项目外包 北京公司.专业团队,成员为专业WPF产品公司一线开发人员,有大型产品开发经验: 提供优质的售后服务,保证产品质量,轻量级产品可以提供规范清晰的源代码,有业务 ...

  10. <开心一笑> 码农 黑客和2B程序员之间的区别

    笔记本电脑 码农: 黑客: 2B程序员: 求2的32次方: 码农: System.out.println(Math.pow(2, 32)); 黑客: System.out.println(1L< ...