Input输入框点击鼠标变色的特效代码

2024-09-05 12:22:06

字体：大中小

来源：转载

供稿：网友

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>表单效果之输入框换色</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>

上一篇：CSS滤镜之——Blur模糊实现内阴影效果

下一篇：JS输入限制，不符要求不能输入的代码

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注