任意美化你的文件域

第一种方法:

样式:

.fileInput{width:102px;height:34px; background:url(http://images.cnblogs.com/cnblogs_com/dreamback/upFileBtn.png);overflow:hidden;position:relative;}
.upfile{position:absolute;top:-100px;}
.upFileBtn{width:102px;height:34px;opacity:0;filter:alpha(opacity=0);cursor:pointer;}

HTML:

        <div class="fileInput left">
<input type="file" name="upfile" id="upfile" class="upfile" onchange="document.getElementById('upfileResult').innerHTML=this.value"/>
<input class="upFileBtn" type="button" value="上传图片" onclick="document.getElementById('upfile').click()" />
</div>

<span class="tip left" id="upfileResult">图片大小不超过2M,大小90*90,支持jpg、png、bmp等格式。</span>

第二种方法:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8″ />
<title>更改文本域的样式-用input模拟文本域</title>
<style>
*{margin:0;padding:0;}
input{border:none;border:1px solid #CCC;vertical-align:middle; }
.input {height:24px; line-height:24px; border-right:none; width:200px;}
.liulan {width:100px;height:26px;background:url(/jscss/demoimg/201206/bgimg.jpg) no-repeat; cursor:pointer;}
.files{ position:absolute; left:202px; top:52px; heigth:26px;cursor:pointer;
filter: Alpha(opacity=0);
-moz-opacity:0;
opacity:0;
}
</style>
</head>
<body>
<BR>
<BR>
<BR>
<form method="post" action="" enctype="multipart/form-data">
<input type="text" id="txt" name="txt" class="input"><input type="button" onmousemove="f.style.pixelLeft=event.x-60;f.style.pixelTop=this.offsetTop;" value="浏ff览" size="30″ onclick="f.click()" class="liulan">
<input type="file" id="f" onchange="txt.value=this.value" name="f" style="height:26px;" class="files"  size="1″ hidefocus>
</form>
<BR>
<BR>
<BR>
<BR>
</body>
</html>

第三种方法:

CSS代码

HTML代码

发表评论