将选择文件控件改造成自定义样式
2013-08-06 11:37
344 查看
input标签的file控件即选择文件控件貌似不能够很方便的自定义样式,而且部件也不可以灵活定制。
目前网上通用的方法就是,将原file控件变成透明隐藏起来,然后把自定义的按钮放在它下面,达到自定义的目标。
(基本各浏览器测试通过)
如果有更好的或者不同的方法,求共享。
目前网上通用的方法就是,将原file控件变成透明隐藏起来,然后把自定义的按钮放在它下面,达到自定义的目标。
(基本各浏览器测试通过)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>定义input type="file" 的样式</title> <style type="text/css"> body{ font-size:14px;} input{ vertical-align:middle; margin:0; padding:0} .file-box{ position:relative;width:340px} .txt{ height:22px; border:1px solid #cdcdcd; width:180px;} .btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;} .file{ position:absolute; top:0; left:0; height:24px; opacity: 0;width:260px } </style> </head> <body> <div class="file-box"> <form action="file.ashx" method="post"> <input type='text' class='txt' id='textfield' /> <input type='button' class='btn' value='浏览...' /> <input type="file" class="file" id="fileField" onchange="document.getElementById('textfield').value=this.value" /> <input type="submit" name="submit" class="btn" value="上传" /> </form> </div> </body> </html>
如果有更好的或者不同的方法,求共享。
相关文章推荐
- [网络收集]用户自定义控件中如何引入样式文件
- 日期选择控件mobiscroll 自定义样式
- 表单文件选择框样式自定义示例
- 仿iOS的Pi 4000 ckerView控件,有时间选择和选项选择,并支持一二三级联动,支持自定义样式
- 代码干货 | 自定义文件上传控件样式-input透明法
- 使用透明度自定义文件上传控件样式
- 自定义样式 实现文件控件input[type='file']
- 【C#】wpf自定义calendar日期选择控件的样式
- html文件上传控件file自定义样式
- 自定义input[file](文件上传控件)样式-兼容IE6
- html文件上传控件file自定义样式
- 文件上传控件 自定义样式
- 自定义文件上传控件样式
- android自定义按钮控件样式 (转)
- 布局文件下控件的选择
- 扩展GridView控件(10) - 自定义分页样式
- 关于FileUpload控件选择文件时触发显示图像事件在IE7以上版本中不显示的问题
- idea Spring-boot 项目上传自定义选择配置properties文件
- Asp.net 4.0 menu 控件样式 + XML 文件配置
- Flex4 DateField自定义的日期选择控件,可选择时分秒