input div 等控件变色

最新推荐文章于 2025-04-25 20:46:55 发布

shang222

最新推荐文章于 2025-04-25 20:46:55 发布

阅读量294

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS web前端css java 文章标签： css html

本文链接：https://blog.youkuaiyun.com/shang222/article/details/84653596

java 同时被 3 个专栏收录

28 篇文章

订阅专栏

web前端css

5 篇文章

订阅专栏

CSS

3 篇文章

订阅专栏

本文介绍了一种基于CSS的表单元素变色方案，适用于Firefox、Mozilla、Opera和IE等浏览器，通过定义全局样式和利用:hover事件实现鼠标经过时的背景色和边框颜色变化，增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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.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" class="input" size="20" maxlength="16" />
  <input type="text" class="input" size="20" maxlength="16" />
  <input type="text" class="input" size="20" maxlength="16" />
  <input type="text" class="input" size="20" maxlength="16" />
  <input type="text" class="input" size="20" maxlength="16" />
  <input type="text" class="input" size="20" maxlength="16" />
  <input type="text" class="input" size="20" maxlength="16" />
  <input type="button"  value="button" />
  <br />
  <select name="select">
  </select>
  <br />
  <textarea name="textarea"></textarea>
</p>
<div>变色</div>
</body>
</html>