html5-file样式
2015-04-07 16:27
429 查看
在复习html5,file时,偶然找到了一篇之前一直想实现的样式需求。贴代码如下,但还有两个问题不太懂。
在chrome下结果
存在的问题:选择文件后,无法看到是否已经选择文件。
原文地址:/article/7045076.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>上传文件</title> </head> <style type="text/css"> .fileInputContainer{ height:256px; background:url(http://images.cnblogs.com/cnblogs_com/dreamback/437546/o_ff6.png); position:relative; width: 256px; } .fileInput{ height:256px; overflow: hidden; /*不太理解为什么要这样设置???*/ font-size: 300px; position:absolute; /*opacity=1时,为什么文字会消失?*/ right:0; top:0; opacity: 0; filter:alpha(opacity=0); cursor:pointer; } </style> <body> <div class="fileInputContainer"> <input class="fileInput" type="file" name="" id="" /> </div> </body> </html>
在chrome下结果
存在的问题:选择文件后,无法看到是否已经选择文件。
原文地址:/article/7045076.html
相关文章推荐
- html5移动端图片剪切上传 以及修改file标签样式
- HTML5的 input:file上传 样式美化及表单异步提交
- HTML5调用手机摄像拍照、相册等功能<input[type=file]>样式美化及demo
- HTML5表单为file文件类型的样式修改
- input file上传文件样式支持html5的浏览器解决方案
- CSS -- file上传,多个浏览器统一样式
- html5匹配不同分辨率样式
- ajax利用html5新特性带进度条上传文件 html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法
- html5 video视频标签自适应手机样式
- html5 Canvas画图教程(2)―画直线与设置线条的样式如颜色/端点/交汇点
- 修改file按钮的样式
- 关于文件流的模拟上传——人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata) | 彬Go
- 关于<input type="file">样式的美化
- [JS进阶] HTML5 之文件操作(file)
- 定义input type=file 样式的方法
- 【转发】Html5 File Upload with Progress
- HTML5学习之FileReader接口
- HTML5样式控制
- HTML5文件上传FileReader API
- HTML5基础(一)——元素、属性、格式化、样式、链接、表格、列表、块、布局