表单划过变换颜色

最新推荐文章于 2022-10-26 10:17:49 发布

iteye_194

最新推荐文章于 2022-10-26 10:17:49 发布

阅读量88

点赞数

分类专栏： WEB_UI 文章标签： IE Firefox Opera CSS XHTML

WEB_UI 专栏收录该内容

13 篇文章 0 订阅

订阅专栏


<!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" content="text/html; charset=gb2312" />
<title>FireFox / Mozilla / Opera / IE 适用</title>
<style type="text/css" by tesion.>
/* CSS v.02 by tesion. 
CopyRight: http://www.netjoin.net
Contact: renziweb@hotmail.com
原创表单变色
*/
/*定义全局样式 */
input,select,textarea,div	{
	font: 12px Arial
	/* 此部分为表单和容器的字体定义 */
	}
/* 所有表单定义默认 */
input,select,textarea	{
	border: 1px solid #EFEFEF;
	}
/* 利用鼠标事件 :hover 来定义当鼠标经过时样式 */
input:hover,select:hover,textarea:hover	{
	background: #F0F9FB;
	border: 1px solid #1D95C7;
	}
/* 由于 :hover 事件只有 Mozilla 支持，因此为方便IE使用 expression 批量定义 */
input,select,textarea {
	tesion:expression(onmouseover=function() 
	{this.style.backgroundColor="#F0F9FB";this.style.border="1px solid #1D95C7"}, 
	onmouseout=function()
	{this.style.backgroundColor="#FFFFFF";this.style.border="1px solid #EFEFEF"})
	}
/* 如上 */
div	{
	background: #EFEFEF;
	padding: 10px; /* 填充 */
	cursor: pointer /* 鼠标 */
	}
div:hover	{
	background: #F0F9FB
	}
div {
	tesion:expression(onmouseover=function() 
	{this.style.backgroundColor="#F0F9FB"}, 
	onmouseout=function()
	{this.style.backgroundColor="#EFEFEF"})
	} 
/* 不错吧？ */
</style>
</head>
<body>
<p>
  <input type="text" size="20" maxlength="16" />
  <br />
  <select name="select">
  </select>
  <br />
  <textarea name="textarea"></textarea>
</p>
<div>这么简单</div>
</body>
</html>