表单效果-鼠标经过input时的颜色发生变化

首页 > 前端代码 > 表单效果-鼠标经过input时的颜色发生变化

2010-06-24, 星期四风羽前端代码鼠标效果 7 Comments Leave a comment

表单效果-鼠标经过input时的颜色发生变化。
也是提高体验常用到的简单效果，如图：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>表单效果-鼠标经过input时的颜色发生变化</title> <style type="text/css"> * { margin:0; padding:0; } body { font-size:63%; color:#000; } /*input*/ .input_on { padding:2px 8px 0pt 3px; height:18px; border:1px solid #999; background-color:#FFFFCC; } .input_off { padding:2px 8px 0pt 3px; height:18px; border:1px solid #CCC; background-color:#FFF; } .input_move { padding:2px 8px 0pt 3px; height:18px; border:1px solid #999; background-color:#FFFFCC; } .input_out { /*height:16px;默认高度*/ padding:2px 8px 0pt 3px; height:18px; border:1px solid #CCC; background-color:#FFF; } /*form*/ ul.input_test { margin:20px auto 0 auto; width:500px; list-style-type:none; } ul.input_test li { width:500px; height:22px; margin-bottom:10px; } .input_test label { float:left; padding-right:10px; width:100px; line-height:22px; text-align:right; font-size:1.4em; } .input_test p { float:left; _margin-top:-1px; } .input_test span { float:left; padding-left:10px; line-height:22px; text-align:left; font-size:1.2em; color:#999; } </style> </head> <body> <ul class="input_test"> <li> <label for="inp_name">姓名：</label> <p> <input id="inp_name" class="input_out" name="" type="text" onfocus="this.className='input_on';this.onmouseout=''" onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /> </p> <span>请输入您的姓名</span> </li> <li> <label for="inp_email">Email：</label> <p> <input id="inp_email" class="input_out" name="" type="text" onfocus="this.className='input_on';this.onmouseout=''" onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /> </p> <span>请输入您的Email</span> </li> <li> <label for="inp_web">网站：</label> <p> <input id="inp_web" class="input_out" name="" type="text" onfocus="this.className='input_on';this.onmouseout=''" onblur="this.className='input_off';this.onmouseout=function(){this.className='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /> </p> <span>请输入您的网站</span> </li> </ul> </body> </html>

提示：你可以先修改部分代码再运行。

文章作者：风羽
本文地址： http://www.phoyu.com/divcss/biaodanxiaoguo-shubiaojingguoinputshideyansefashengbianhua.html
版权所有 © 转载时必须以链接形式注明作者和原始出处！

« 图片等比例缩放个人最优化版使用HTML5的链接预取功能给网站提速 »

或许你会感兴趣的文章

2010-05-09 非常简单的表格隔行换色鼠标经过变换色效果