给上传文件的input控件“美容”
2017-05-06 13:50
197 查看
在工作中经常会遇到form表单这种东西。然而表单的其他input控件样式还是很好改变的。但是,唯独input类型是file的文件上传控件可能就没那么好打扮的漂亮。
demo:
html代码
1 <body> 2 <form action="" method="post" enctype="multipart/form-data"> 3 <a href="#" class="a-upload"> 4 <input type="file" name="file" id="file">点击这里上传图片</a> 5 </form> 6 </body>
css代码
1 <style> 2 .a-upload { 3 padding: 4px 10px; 4 width: 200px; 5 height: 30px; 6 box-sizing: border-box; 7 line-height: 20px; 8 position: relative; 9 cursor: pointer; 10 color: #888; 11 background: #fafafa; 12 border: 1px solid #ddd; 13 border-radius: 4px; 14 overflow: hidden; 15 display: inline-block; 16 *display: inline; 17 *zoom: 1; 18 top: 5px; 19 } 20 21 .a-upload input { 22 position: absolute; 23 font-size: 100px; 24 opacity: 0; 25 filter: alpha(opacity=0); 26 cursor: pointer; 27 width: 200px; 28 height: 30px; 29 left: 0; 30 top: 0; 31 } 32 33 .a-upload:hover { 34 color: #444; 35 background: #eee; 36 border-color: #ccc; 37 text-decoration: none 38 } 39 </style>
相关文章推荐
- 通过HtmlInputFile控件上传文件的类
- 在C#.net中做页面上传的程序。用Dhtml的控件:(创建文件上载控件,该控件带有一个文本框和一个浏览按钮。)和类HtmlInputFile的两种方法
- Input控件上传文件
- 自定义input[file](文件上传控件)样式-兼容IE6
- asp.net 文件上传,Input(File)控件
- 通过HtmlInputFile控件上传文件的类
- html input控件type为file上传文件、图片,及保存为原文件
- [转]客户端input file控件,C#多文件上传
- 使用html input(file)控件上传文件
- 在IE中必须点击input file 控件的浏览按钮才能提交上传,否则没有权限 。js文件报拒绝访问,解决办法是将input file控件定位到你要点击的地方 ,并且input file做成透明的
- 【翻译】Styling an input type="file"美化文件上传控件
- 后台处理客户端控件上传的文件(input type="file")
- ASP.Net之HTMLInputFile控件上传文件
- Input控件上传文件
- 通过HtmlInputFile控件上传文件的类
- [翻译]运用HtmlInputFile服务器控件上传多个文件
- 如何通过HtmlInputFile控件上传文件的类
- 如何设置上传文件控件 input type="file" 的 默认值
- 通过HtmlInputFile控件上传文件的类
- 通过HtmlInputFile控件上传文件的类