修改file按钮的默认样式实现代码
2013-04-23 00:00
821 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <title>添加附件</title> </head> <script type="text/javascript" src="jquery-1.8.0.js"></script> <script type="text/javascript"> function fclick(obj){ style.posTop=event.srcElement.offsetTop style.posLeft=event.x-offsetWidth/2 } $(function(){ $("#addFile").click(function(){ var br = $("<br>"); var input1 = $("<input id='inputrecievedocument' type='text'/>"); var input2 = $("<input type='button' style='margin-left:5px;background-color:blue' id='btnrecievedocument' onmouseover='fclick(t_file)' value='浏览'/>"); var input3 = $("<input name='upfile' type='file' style='position:absolute;filter:alpha(opacity=0);width:70px;' id='t_file' onchange='inputrecievedocument.value=this.value' hidefocus/>"); var button = $("<input type='button' value='删除' style='margin-left:5px;background-color:blue'/>"); $("#file").append(br).append(input1).append(input3).append(input2).append(button); button.click(function() { br.remove(); input1.remove(); input2.remove(); input3.remove(); button.remove(); }); }); }); </script> <body class="body"> <form method="post" action="" enctype="multipart/form-data"> <input type="button" value="添加附件" class="btn_fujian" id="addFile" style="margin-left:20px;margin-top:2px;"/> <div id="file"></div> </form> </body> </html>
IE9中运行如下:
相关文章推荐
- 修改file按钮的默认样式实现代码
- type=file导入文件按钮样式修改的jsp代码-完美好
- 记录--前端 页面 jquery 被点击按钮修改样式 其他默认
- 修改 上传图片按钮input-file样式。。
- 用JS实现input中的file标签的样式(当要修改file标签的字体样式时使用)
- 修改input file文件上传的默认样式 兼容ie8
- 小技巧实现修改input-file样式,代理上传
- 修改input type=file 标签默认样式的简单方法
- input的file组件按钮上默认文字的修改
- 修改video标签自带按钮的默认样式
- 使用bootstrap默认样式,修改input=file的展现样式
- 修改input file类型的默认按钮
- Android开发自定RadioGroup实现多布局重叠并单选&修改radioButton按钮样式
- 用css alpha 滤镜 实现input file 样式美化代码
- 只修改input file组件的浏览按钮样式
- 微信小程序 JS动态修改样式的实现代码
- 修改 bootstrap table 默认detailRow样式的实例代码
- input type="file"在各个浏览器下的默认样式,以及修改自定义样式
- CSS 修改 IOS 默认按钮样式
- 地磅称量系统之(40) 实现称量管理界面上的添加、修改、删除、保存、取消按钮的代码