自定义样式 实现文件控件input[type='file']
一般我们设计的上传按钮都是和整个页面风格相似的样式,不会使用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']的更多相关文章
- html的文件控件<input type="file">样式的改变
一直以来,<input type="file">上传文件标签默认样式都是让人不爽的,使用它多要给它整整容什么的,当然如果用ui插件还比较方便,不能就自己来操刀实践一下! ...
- ASP.NET控件<ASP:Button /> html控件<input type="button">区别联系
ASP.NET控件<ASP:Button />-------html控件<input type="button">杨中科是这么说的:asp和input是一样 ...
- 文件上传input type="file"样式美化
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 使用自定义的按钮替换默认的<input type='file'>
可以通过让默认的input type = 'file'按钮透明度变为0,并且让它刚好覆盖在自定义的按钮上,来实现此效果: 将它写成一个jQuery插件: (function($){ $.fn.brow ...
- 原来样式改变不了(input type="file")
label { background-color: #979fa8; color: #fff; display: inline-block; padding: .8rem 4rem; cursor: ...
- jQuery UI 自定义样式的日历控件
在线演示 本地下载
- 兼容IE浏览器样式的html上传文件控件
最近在公司做项目时需要用到html的上传文件控件,但发现原生的上传文件控件<input type="file" />在IE.Chrome浏览器的显示效果相差很大,为了统 ...
- input type='file'上传控件假样式
采用bootstrap框架样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...
- <input type="file">如何实现自定义样式
利用样式覆盖来实现效果:先看下原本和改变后的样式 1 <!doctype html> 2 <html> 3 <head> 4 <title>file自定 ...
随机推荐
- HTTP和HTTPS的区别
1.HTTP和HTTPS的概念 超文本传输协议HTTP(Hypertext transfer protocol)是一种详细规定了浏览器和万维网服务器之间相互通信的规则,通过因特网传送万维网文档的数据传 ...
- Android 主题切换 小结
前言 我们用手机的时候经常看到 设置里面有夜间模式和白天模式来更换APP的主题,以前以为很简单,但是实际做起来还是有各种不完美,那么我们也要去了解各种解决方案来丰富我们的知识,现在我们就来看看各种优劣 ...
- 找出数组中从未出现的最小正整数java实现
/** * 找出未出现的最小正整数 * @param A * @param n * @date 2016-10-7 * @author shaobn */ public static int find ...
- tslib1.4编译
准备工作:ubuntu14.04-64位+arm-linux-gcc(2014)+tslib.14 1.arm-linux-gcc下载地址:http://www.veryarm.com/arm-non ...
- org.springframework.dao.DataIntegrityViolationException:
数据库用的hibernate,开发工具用的myeclipse,使用开发工具连接数据库生成hibernate基于xml的po类,运行时报org.springframework.dao.DataInteg ...
- margin padding
margin and padding有时候可以实现相同的效果但是 用padding的场合更多 2者的区别和用法的细节我还是没掌握好
- iOS 多语言的切换
一.添加应用程序需要支持的国际语言 二.新建一个Localizable.strings文件,作为多语言对应的词典,存储多种语言 三.在Localizable.strings的对应文件以键值对的形式配置 ...
- Windows7下的免费虚拟机(微软官方虚拟机)
前言: 不是说windows7自带的虚拟机最好用,而是他是正式版的,免费的,只要你是windows7用户,就可以免费使用: 其实我最推荐的还是Vmware: 微软为什么提供免费的虚拟机呢? 因为vis ...
- 搭建基于Jenkins salt-api的运维工具
1. 安装salt-master和salt-minion 安装过程不再赘述,请参考http://docs.saltstack.com/en/latest/topics/installation/ind ...
- [已解决][HTML5]基于WebSocket开发聊天室应用
WebSocket示例java的比较少,大部分是nodejs的,比较有名的是socket.io的chat, 借用下他的前端实现一套java的,后端基于https://github.com/genera ...