码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-08-16 12:25:50      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   io   for   ar   

  • 更改文本域的样式 - 用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" 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

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

标签:style   blog   http   color   os   io   for   ar   

原文地址:http://www.cnblogs.com/youtianxia/p/3916221.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!