首页 > 代码库 > 更改文本域的样式 - 用input模拟文本域

更改文本域的样式 - 用input模拟文本域

2024-07-17 21:43:56   219人阅读

  • 更改文本域的样式 - 用input模拟文本域，有个文本域的需要美化。大家都知道文本域在不同的浏览器里的表现是不一样的，而且样式不能修改，所以自己就模拟了一个文本域。用input模拟文本域。
<!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" onm ousemove="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=http://www.mamicode.com/this.value" name="f" style="height:26px;" class="files"  size="1" hidefocus></form><BR><BR><BR><BR></body></html>

 


联系
我们