第一种方法： 样式： .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> […]
View Details