原始的file控件是这么写的:
<input type="file" name="file" />
比较丑。它在外观上是由一个text和一个button组合成的,实际是一个控件
既然这样我们就用一个text和一个button来显示这个file的样式,html代码是这样:
<form action="" method="post" enctype="multipart/form-data">
<div class="file-box">
<input type='text' name='textfield' id='textfield' class='txt' />
<input type='button' class='btn' value='浏览...' />
<input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" />
<input type="submit" name="submit" class="btn" value="上传" />
</div>
</form>
外面的一层div是为了给里面的input提供位置参考,因为写样式的时候需要相对定位,使真正的file控件覆盖在模拟的上面,然后隐藏掉file控件(即使file控件不可见),所以css代码是这样的:
<style>
.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; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
</style>
效果图:
- 大小: 1.2 KB
分享到:
相关推荐
当我们想要用css美化表单的时候,有两个控件就会和前段人员作对,一个是是大名鼎鼎的select,另一个就是我现在要说说的input type=file
input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多网页的风格都不太协调。 根据用户的需求,设计风格,改变其显示样式的场合就比较多了。 如果,要像下面一样...
下面我们了解一下,多图上传时...input id=upload type=file accept=image/* multiple=multiple> <button class=btn>点击上传</button> <div class=img-box> <!-- 存放预览图片 --> </div>
前面我写过一篇短小的文章,简要的介绍了下怎样定义input type=”file” 的样式。对于一般的表单,上传控件较少,这样的做法确实不错,既减少了代码,又美化了样式,原文:《定义input type=”file” 的样式》 其实...
在文档的第一个表单中,查找所有的单选按钮(即: type 值为 radio 的 input 元素)。 jQuery 代码: $("input:radio", document.forms[0]); --------------------------------------------------------------------...
* css里面提供了一些定义好的样式,可以拿过来使用 * 比如超链接 ** 超链接的状态 原始状态 鼠标放上去状态 点击 点击之后 :link :hover :active :visited ** 记忆的方法 lv ha 5、css的盒子模型 ** 在...
其实感觉layui帮我们定义好了CSS和许多JS文本,我们需要做的只是按照layui的命名规范选好样式进而使用就可以了。 layu官方文档的命名规范为: CSS命名规范 class命名前缀:layui,连接符:-,如:class=...
input type="text" name="test8" isrequired="true" dataType="post_code"> 网址:<input type="text" name="test9" isrequired="true" dataType="url"> 自定义函数:<input type=...
<input type=text onkeypress="return event.keyCode>=48&&event.keyCode<=57||(this.value.indexOf(".")<0?event.keyCode==46:false)" onpaste="return !clipboardData.getData("text").match(/D/)" ondragenter=...
4、style :定义 内联方式方式使用(CSS中) 4、注释 语法:<!-- --> 注意: 1、注释不能嵌套 2、注释不能出现在标记中 3、HTML 文档结构 W3C :Word Wide Web Consortium (万维网联盟) 1、HTML文档的...
处于安全上的考虑,input[type="file"] 的文件选择按钮样式并不能随意修改(不过可以修改input 的透明度),可能会跟设计师的设计格格不入,这时可以使用透明效果来自定义上传按钮
input type="file" /> )是一项耗时的任务,在不同的浏览器上其结果并不相同。 NiceFileInput使事情变得容易,并在3个不同HTML元素(文本输入,按钮和div容器)上转换了文件输入,您可以使用CSS对其进行样式设置...
StylesXmlPath="" 设置定义CSS样式列表的XML文件的位置 TabSpaces=4 TAB键产生的空格字符数 ToolBarCanCollapse=true/false 是否允许展开/折叠工具栏 ToolbarSets=object 允许使用TOOLBAR集合 ...
引语:大家都知道,html中上传文件就一个input,type=file就搞定了。但是,这个标签的样式,实在不值得提点什么,要改动他的样式,恐怕也是较难的。但是其实挺简单,今天就来说说上传文件小技巧吧! 1. 怎样自定义...
• 美元符号定义 jQuery • 选择符(selector)“查询”和“查找” HTML 元素 • jQuery 的 action() 执行对元素的操作 示例 $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $("p.test").hide() - ...
input type='button' value='提交' [removed] function fun(){ var str = document.getElementById("test").value; var divs = document.getElementsByTagName("div"); for(i=0;i;i++){ if(divs[i]....
/// 定义了4个日志记录方法 (error, warning, info, trace) /// /// public class ApplicationLog { /// /// 将错误信息记录到Win2000/NT事件日志中 /// <param name="message">需要记录的文本...
/// 定义了4个日志记录方法 (error, warning, info, trace) /// /// public class ApplicationLog { /// /// 将错误信息记录到Win2000/NT事件日志中 /// <param name="message">需要记录的文本信息 /// public ...