`
kfcman
  • 浏览: 382352 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

file文件域的美化（未美化精简版），兼容IE，firefox火狐，chrome谷歌浏览器

    博客分类：
  • CSS
浏览器IEChromeFirefoxCSS 
阅读更多
前面的测试说明用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 class="input_text" type="text" id="txt" name="txt" />
<input type="button" value="浏览" />
<input class="input_file" size="30" type="file" onchange="txt.value=this.value" />
</form>
</body>
这里实现了用文本域和按钮替换文件域，文件域透明度为0，显示下面的文本域和按钮，功能美化两不误；

只要对input文本域还有button按钮进行样式定义就可以实现美化了。
分享到：
| jQuery用focus()使文本输入框获得焦点且焦 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics