input file 样式设置,设置成button样式

对于页面开发者来说,有两个html element 的CSS 都使人伤心欲绝,一个是select 下拉框,另外一个是 input  type="file" ,这两个的样式太另类了,而且不同的浏览器样子还很不一样。对于做前段的的页面仔来说,这是一个挑战,我在做项目的过程中,同样遇到了这个问题,后来搜索前人留下来的资料,还是搞定了。效果图如下:


具体代码如下:
程序代码 程序代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自定义文件上传控件样式(兼容 IE6)</title>
<style>
body{font-family:微软雅黑;}
h1 {color:#000000;font-size:16px;}
h2 {color:#008000;font-size:14px;}
.input-file {
display:inline-block;
width:100px;
height:30px;
line-height:30px;
background:#cf2018;
text-align:center;
overflow:hidden;
position:relative;
}
.input-file:hover {
background:red;
}
.input-file input {
opacity:0;
filter:alpha(opacity=0);
font-size:100px;
position:absolute;
top:0;
right:0;
}
</style>
</head>
<body>
    <h1>自定义文件上传控件样式</h1>
    <h2>默认控件样式</h2>
    <input type="file">
    
    <h2>处理后控件样式:<span> 标签</h2>
    <span class="input-file">浏览...<input type="file"></span>
    
    <h2>处理后控件样式:<a> 标签</h2>
    <a href="javascript:void(0);" class="input-file">浏览...<input type="file"></a>
</body>
</html>


看到的图是chrome下的效果,当然 IE6 以上版本经测试也是可以的,另外完美兼容firefox. 至于颜色,可以自己修改CSS样式.


除非申明,文章均为一号门原创,转载请注明本文地址,谢谢!
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: input file
相关日志:
评论: 0 | 引用: 0 | 查看次数: -
发表评论
昵 称:
密 码: 游客发言不需要密码.
内 容:
验证码: 验证码
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.