鼠标经过input时的颜色发生变化代码,Css代码库,德仔网

代码语言

代码分类

【Css】鼠标经过input时的颜色发生变化

作者:Dezai.CN / 发布于2013/9/25/ 702


	<!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>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

同语言下

可能有用的

Dezai.CN贡献的其它代码(4037)