有Focus效果的提交信息表单(DIV+CSS)

支付宝内搜索 9155838 即可领现金红包 每天都能领哦

HTML代码:
<form action="#" method="post" name="myform" id="myform"> <div class="bo"><label for="name">姓名:</label> <input type="text"size="20" name="name" id="name" maxlength="10" /></div>

<div class="bo"><label for="tel">电话:</label> <input type="text" size="20" name="tel" id="tel" maxlength="16" /></div>

<div class="bo"><label for="mo">主题:</label> <input type="text" size="30" name="mo" id="mo" maxlength="20" /></div>

<div class="bo"><label for="con">内容:</label> <textarea cols="40" rows="8" name="con" id="con"></textarea></div>

<div class="btcenter"><input type="submit" class="bt" value="Send" />  <input type="reset" class="bt" value="Reset" /></div></form>

CSS代码:
form{  margin: 0px auto;  width: 450px;  border: solid 1px #CCCCCC; }

.bo{  border-bottom: solid 1px #CCCCCC; }

label{  float: left;  padding: 10px 0px 4px 30px; }

input{  padding: 1px; }

input,textarea{  border: 1px solid #CCCCCC;  margin: 5px 0px; }

textarea{  padding: 2px; }

.bt{  width: 38px;  height: 20px;  font-size: 11px;  border: solid 1px #CCCCCC;  background: #FBFBFB;  text-align: center; }

.btcenter{  text-align: center;  clear: left;  padding: 4px 0px 0px; }

.sffocus {  background: #F0F9FB; /*----for IE----*/  border: 1px solid #1D95C7; }

textarea:focus, input:focus {  background: #F0F9FB; /*----for firefox......----*/  border: 1px solid #1D95C7; }

body {  font-family: Arial, Helvetica, sans-serif;  font-size: 12px;  color: #666666;  margin-top: 20px; }

suckerfish.js  原作者:htmldog.com  js代码主要针对IE的,IE还不支持focus,FIREFOX、NS.....不需要。详细情况可去作者主页。
function suckerfish(type, tag, parentId) { if (window.attachEvent) { window.attachEvent("onload", function() { var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag); type(sfEls); }); } } sfFocus = function(sfEls) { for (var i=0; i<sfEls.length; i++) { sfEls[i].onfocus=function() { this.className+=" sffocus"; } sfEls[i].onblur=function() { this.className=this.className.replace(new RegExp(" sffocus\\b"), ""); } } } suckerfish(sfFocus, "INPUT"); suckerfish(sfFocus, "TEXTAREA");

推荐文章

发表新评论

意甲线上买球-意甲买球平台-意甲买球网站【官网】