输入框input鼠标点击自动加底色代码,Css代码库,德仔网

代码语言
代码分类
【Css】输入框input鼠标点击自动加底色
作者:bacteroid / 发布于2014/7/2/ 1181

	<!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>
	 <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'" />
	 <span>您的姓名</span>
	 </li>
	 <li>
	 <label for="inp_email">您的Email：</label>
	 <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'" />
	 <span>请输入Email</span>
	 </li>
	 <li>
	 <label for="inp_web">你的破站：</label>
	 <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'" />
	 <span>请输入网址</span>
	 </li>
	 </ul>
	 </body>
	 </html>
试试其它关键字
　加底色　
同语言下
可能有用的
bacteroid贡献的其它代码(12)