美化file表单的简单小技巧

转载 2006年06月22日 15:51:00
今天看到有人在javascript论坛上问了一个"如何在一个页面点击按钮弹出一个路径选择对话框"的问题,有位朋友给出了一个比较好的解决办法,可以美称为"js事件乾坤大挪移".代码如下:
<input type="button" value="Select" onclick="path.click()" />
<input type="file" id="path" style="display:none;" />
这里实际上隐藏了原来的file表单,因为file表单按钮样式无法改变,这里用一个真实的按钮代替file的按钮.可以把file的click事件转移到button上.然后可以同样的模拟一个text框来代替file中的text框.然后加以美化即可.
的确可做一种美化file表单的巧妙方法.偶然想到的哦....

根据设想偶写的一段代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<input type="text" size="20" name="upfile" id="upfile" style="border:1px dotted #ccc">
<input type="button" value="浏览" onclick="path.click()" style="border:1px solid #ccc;background:#fff">
<input type="file" id="path" style="display:none" onchange="upfile.value=this.value">
</BODY>
</HTML>

html5和css3表单样式美化插件

这是一款使用html5新的type属性制作的表单,并用纯css3来对表单进行美化的html5和css3表单样式美化插件。该表单美化插件美观大方,易于集成,十分实用。 在线演示...
  • natalie86
  • natalie86
  • 2015年01月29日 13:26
  • 1342

laber美化表单小技巧

laber 运用小技巧
  • haihiaandtongtong
  • haihiaandtongtong
  • 2015年06月04日 14:36
  • 507

自定义input type=file 样式 美化input type=file 改变input type=file控件“丑陋面貌”

自定义input type=file 样式,美化input type=file 改变input type=file控件“丑陋面貌”...
  • u010243555
  • u010243555
  • 2014年12月24日 11:15
  • 3356

HTML5表单美化

[转载]利用 HTML5 美化表单 对表单感兴趣的人并不多,但 HTML5 引入的一些重大改进却同时方便了创建表单的开发人员和填写表单的用户。全新的表单元素、属性、输入类型、基于浏览器的验证、CSS...
  • cysear
  • cysear
  • 2015年07月20日 14:04
  • 1563

表单美化-原生javascript和jQuery单选按钮(兼容IE6)

最近很多人问怎么美化表单的y
  • qianqianyixiao1
  • qianqianyixiao1
  • 2014年10月24日 09:47
  • 1175

PPT文档实用美化技巧

转载者:往复式压缩机ppt课件              来源:www.2ppt.cn   Powerpoint文档的制作已经成为办公室必备技能之一。如何才能做出更清晰漂亮的PPT文档,为报告或演示...
  • cbgcfe
  • cbgcfe
  • 2016年06月04日 18:06
  • 266

form表单美化

button,input,select,textarea{ vertical-align:middle; } textarea{ resize:none; vertical-align:t...
  • heqingsong1
  • heqingsong1
  • 2013年01月21日 18:00
  • 2451

css input[type=file] 样式美化,input上传按钮美化

我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox美化,input radio美化是一个道理的 思路: input ...
  • u010174173
  • u010174173
  • 2015年07月21日 11:07
  • 1625

HTML 文件上传框美化

点击这里上传文件 选择文件 CSS样式1:/*a upload */ .a-upload { padding: 4px 10px; height: 20px; ...
  • dong_18383219470
  • dong_18383219470
  • 2016年11月04日 16:23
  • 1120

CSS美化 input type=file 兼容各个浏览器

在日常重构中,form表单家族中的 upload field 在使用 css 美化时令人头疼!默认情况下,各个浏览器下的表现层次不齐,很是郁闷,于是本人搜集整理了一些常用技巧,需要了解的朋友可以参考下...
  • baochanghong
  • baochanghong
  • 2016年10月13日 22:21
  • 1384
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:美化file表单的简单小技巧
举报原因:
原因补充:

(最多只允许输入30个字)