<!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>格栅除污机</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/201202/inputbg.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="浏览" 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>
更改文本域的样式 - 用input模拟文本域,布布扣,bubuko.com
原文：http://www.cnblogs.com/youtianxia/p/3916221.html