让Input输入框在输入时变为立体的_表单按钮特效

模板酷站
  •       4/5
  •       1
  •       2
  •       3
  •       4
  •       5
查看演示效果

      织梦DedeCMS视频教程买空间 租服务器 选网硕互联! 无忧站长工具,百度权重一键全查!

      细心、注意发现的人都会注意,有不少网站为了提高表单的输入效率,让Input输入框在输入时变为立体的,这样看的更清楚,也就是当鼠标点击输入框后会激活JS函数,调用对应的CSS代码,仔细看一下代码就明白了。

      <!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" mrc="text/html; charset=gb2312" /> <title>立体输入框-www.mb5u.com</title> <style type="text/css"> <!-- .it_s { display:table; border:1px solid #979797} .it1,.it2 { border:1px solid #fff; background:#fff none repeat scroll 0 0} .it1 { border:1px solid #fff;} .it2 { border-left:1px solid #000; border-top:1px solid #000} --> </style> </head> <body> <span class="it_s"><input type="text" name="textfield" onblur="this.className='it1';" onfocus="this.className='it2';" class="it1" size="25"/></span> </body> </html>