一般我们设计的上传按钮都是和整个页面风格相似的样式,不会使用html原生态的上传按钮,但是怎么既自定义自己的样式,又能使用file控件功能呢?

思路是这样的:

1.定义一个相对定位的DIV,按照整成步骤实现自己的结构和样式;

2.在DIV里添加<input type="file" class="my-file">

3.将file控件绝对定位,宽度和高度全部覆盖掉父元素,并且设置透明度为0.

实现代码如下:

.my-file {
cursor: pointer;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: %;
opacity: ;
filter: alpha(opacity=);
font-size: 120px;
}

大致工作基本完成,但是这里有在IE8里有一个小问题,这里就是为什么要给file加一个 font-size: 120px 的原因。

这是控件的原生样式,chrome里点击没问题,但是在IE8里,点击范围只有浏览按钮那个区域

设置字体大小后,人为的扩大了按钮的点击范围,所以这时候点击整个DIV范围都可以弹出文件框。

自定义样式 实现文件控件input[type='file']的更多相关文章

  1. html的文件控件<input type="file">样式的改变

    一直以来,<input type="file">上传文件标签默认样式都是让人不爽的,使用它多要给它整整容什么的,当然如果用ui插件还比较方便,不能就自己来操刀实践一下! ...

  2. ASP.NET控件<ASP:Button /> html控件<input type="button">区别联系

    ASP.NET控件<ASP:Button />-------html控件<input type="button">杨中科是这么说的:asp和input是一样 ...

  3. 文件上传input type="file"样式美化

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 使用自定义的按钮替换默认的<input type='file'>

    可以通过让默认的input type = 'file'按钮透明度变为0,并且让它刚好覆盖在自定义的按钮上,来实现此效果: 将它写成一个jQuery插件: (function($){ $.fn.brow ...

  5. 原来样式改变不了(input type="file")

    label { background-color: #979fa8; color: #fff; display: inline-block; padding: .8rem 4rem; cursor: ...

  6. jQuery UI 自定义样式的日历控件

    在线演示 本地下载

  7. 兼容IE浏览器样式的html上传文件控件

    最近在公司做项目时需要用到html的上传文件控件,但发现原生的上传文件控件<input type="file" />在IE.Chrome浏览器的显示效果相差很大,为了统 ...

  8. input type='file'上传控件假样式

    采用bootstrap框架样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...

  9. <input type="file">如何实现自定义样式

    利用样式覆盖来实现效果:先看下原本和改变后的样式 1 <!doctype html> 2 <html> 3 <head> 4 <title>file自定 ...

随机推荐

  1. HTTP和HTTPS的区别

    1.HTTP和HTTPS的概念 超文本传输协议HTTP(Hypertext transfer protocol)是一种详细规定了浏览器和万维网服务器之间相互通信的规则,通过因特网传送万维网文档的数据传 ...

  2. Android 主题切换 小结

    前言 我们用手机的时候经常看到 设置里面有夜间模式和白天模式来更换APP的主题,以前以为很简单,但是实际做起来还是有各种不完美,那么我们也要去了解各种解决方案来丰富我们的知识,现在我们就来看看各种优劣 ...

  3. 找出数组中从未出现的最小正整数java实现

    /** * 找出未出现的最小正整数 * @param A * @param n * @date 2016-10-7 * @author shaobn */ public static int find ...

  4. tslib1.4编译

    准备工作:ubuntu14.04-64位+arm-linux-gcc(2014)+tslib.14 1.arm-linux-gcc下载地址:http://www.veryarm.com/arm-non ...

  5. org.springframework.dao.DataIntegrityViolationException:

    数据库用的hibernate,开发工具用的myeclipse,使用开发工具连接数据库生成hibernate基于xml的po类,运行时报org.springframework.dao.DataInteg ...

  6. margin padding

    margin and padding有时候可以实现相同的效果但是 用padding的场合更多 2者的区别和用法的细节我还是没掌握好

  7. iOS 多语言的切换

    一.添加应用程序需要支持的国际语言 二.新建一个Localizable.strings文件,作为多语言对应的词典,存储多种语言 三.在Localizable.strings的对应文件以键值对的形式配置 ...

  8. Windows7下的免费虚拟机(微软官方虚拟机)

    前言: 不是说windows7自带的虚拟机最好用,而是他是正式版的,免费的,只要你是windows7用户,就可以免费使用: 其实我最推荐的还是Vmware: 微软为什么提供免费的虚拟机呢? 因为vis ...

  9. 搭建基于Jenkins salt-api的运维工具

    1. 安装salt-master和salt-minion 安装过程不再赘述,请参考http://docs.saltstack.com/en/latest/topics/installation/ind ...

  10. [已解决][HTML5]基于WebSocket开发聊天室应用

    WebSocket示例java的比较少,大部分是nodejs的,比较有名的是socket.io的chat, 借用下他的前端实现一套java的,后端基于https://github.com/genera ...