File input 的样式和文字的更改方法__适用于Firefox、IE等浏览器

<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input type file test - zishu.cn</title>
<style>
#uploadImg{
    margin:50px auto;
    font-size:12px; 
    position:relative; 
    font-size:16px; 
    width:64px; 
    height:22px; 
    line-height:22px; 
    overflow:hidden;
}
#file{
    position:absolute;
    left:0;
    top:0;
    height:22px;
    width:64px;
    opacity: 0;    /* Firefox, Safari(WebKit), Opera */  
    -ms-filter: "alpha(opacity=0)";     /* IE 8 */  
    filter: alpha(opacity=0);     /* IE 4-7 */
}
</style>
</head>
<body>
<form action="./test.php" enctype="multipart/form-data" method="POST" target="hide_iframe">
<div id="uploadImg">
    <input type="file" id="file" name="file" />
    <a href="#">上传图片</a>
</div>
</form>
</body>
</html>

 

posted @ 2015-12-24 09:58  仗剑天涯只为卿  阅读(282)  评论(0编辑  收藏  举报