首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

file资料域的美化(未美化精简版),兼容IE,firefox火狐,chrome谷歌浏览器

2012-11-20 
file文件域的美化(未美化精简版),兼容IE,firefox火狐,chrome谷歌浏览器前面的测试说明用css直接控制文件域

file文件域的美化(未美化精简版),兼容IE,firefox火狐,chrome谷歌浏览器
前面的测试说明用css直接控制文件域的样式表现是不好实现的,使用替代方法可以实现。

代码如下:

css样式部分:

<title>文件域美化</title>
<style type="text/css">
.input_text{width:250px;}
.input_file{width:300px; margin-left:-300px; filter:alpha(opacity=0); opacity:0;}
</style>

html部分:

<body>
<form method="post">
<input type="text" id="txt" name="txt" />
<input type="button" value="浏览" />
<input size="30" type="file" onchange="txt.value=this.value" />
</form>
</body>
这里实现了用文本域和按钮替换文件域,文件域透明度为0,显示下面的文本域和按钮,功能美化两不误;

只要对input文本域还有button按钮进行样式定义就可以实现美化了。

热点排行