`

表单划过变换颜色

阅读更多
<!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>
分享到:
评论

相关推荐

    CSS3颜色表单,我珍藏的给大家了

    本资源“CSS3颜色表单”旨在帮助你更好地理解和运用CSS3中的颜色系统,让你的网页设计更加丰富多彩。 CSS3颜色系统的扩展大大增强了网页的颜色表现力。它不仅支持传统的RGB(红绿蓝)和RGBA(红绿蓝透明度)颜色...

    C#form不断变化背景颜色

    在这个特定的场景中,开发者使用了Timer控件和Random类来实现颜色的随机变换,下面将详细解释这两个关键知识点。 1. **Windows Forms中的Form**: Form是C#中的窗口类,它是所有用户界面(UI)元素的容器。在本例中...

    VFP通过在表单或表单内的控件上按下鼠标左键来移动表单

    标题中的“VFP通过在表单或表单内的控件上按下鼠标左键来移动表单”指的是在Visual FoxPro(VFP)编程环境中,如何实现一个特殊功能,即允许用户通过点击表单上的任何控件,而不仅仅是标题栏,来移动整个表单的位置...

    表单设置颜色标识1

    "表单设置颜色标识1"这个话题聚焦于如何通过编程方式为表单中的特定字段设置颜色标识,以便增强视觉提示或者突出显示特定信息。在描述中提到了SQL更新语句,这表明我们正在对数据库中的数据进行操作,特别是针对名为...

    漂亮的form表单-漂亮的form表单

    使用CSS来改变表单元素的外观,包括字体、颜色、边框、背景等。例如,可以设置输入框的圆角、边框宽度和内填充: ```css input[type="text"], input[type="password"] { border-radius: 5px; border: 1px solid...

    CSS样式表单美化系列

    1. **基础样式设置**:使用CSS,我们可以改变表单元素的字体、颜色、大小、边框样式等。例如,`border-radius`属性可以创建圆角效果,提升表单的现代感;`padding`和`margin`可以调整元素内部和外部的空间,使布局更...

    CSS制作表单技术

    利用CSS,开发者可以完全自定义表单元素的样式,包括颜色、字体、布局等方面,从而实现更加美观和符合品牌形象的设计效果。此外,良好的CSS设计还能提高表单的可访问性和可用性,使用户更容易理解和操作。 #### ...

    测试用例 表单测试

    * 文本格式:检查表单中的文本格式是否正确,包括字体、大小、颜色等。 * 条件格式:检查表单中的条件格式是否正确,包括控件的可见性和读写状态。 * 规则:检查表单中的规则是否正确,包括条件、操作或二者的集合。...

    JAVA动态表单设计,自定义表单,自定义数据

    这种技术的核心在于提供一个灵活的、可配置的平台,用户或开发者可以通过界面来定义表单字段、布局以及与后端数据的交互方式。以下是对这个主题的详细讲解: 1. **动态表单的概念** 动态表单是指可以在运行时根据...

    C# winfrom 自定义表单设计器

    同时,每个控件都有可配置的属性,如大小、位置、颜色、字体等,这些属性可以通过属性窗口进行设置。 **5. 复制、粘贴、对齐操作** 复制和粘贴功能允许开发者将一个或多个控件的布局复制到剪贴板,然后在表单的其他...

    梦行表单-免费好用的表单设计和数据收集分享工具.

    除了基本的表单元素外,梦行表单还支持用户自定义表单样式,包括但不限于字体大小、颜色搭配以及背景图片等,确保所设计的表单不仅功能齐全而且外观美观。 #### 2.3 高级设置 对于有特殊需求的用户而言,梦行表单...

    40多款漂亮的form表单设计

    此外,合理使用颜色和对比度可以增加视觉吸引力,同时提高可访问性。 在这些示例中,许多表单采用了现代的解决方案,如使用渐进增强或优雅降级策略,确保在不同浏览器和设备上的兼容性。例如,使用HTML5的新的表单...

    CSS表单设计最简单的,最基本的,CSS表单代码,html代码,表单标准化设计

    CSS允许我们控制表单的布局、颜色、字体、边框等样式: 1. 布局:通过`display`属性可以改变元素的显示方式,例如`inline-block`或`flex`,使表单元素水平或垂直排列。 ```css input, select, textarea { ...

    PHP表单生成器,快速生成现代化的form表单

    在描述中提到的功能包括复选框、单选框、输入框、下拉选择框等基本表单元素,以及更复杂的特性如省市区三级联动、时间选择、日期选择、颜色选择和文件/图片上传。这些功能使得表单不仅限于简单的数据输入,还能实现...

    漂亮的表单UI

    总结一下,漂亮的表单UI设计需要考虑布局、输入字段、按钮、错误处理、颜色与视觉层次以及响应式设计等多个方面。通过精心策划这些元素,可以创造出既美观又实用的表单,提高用户满意度,从而提升产品的整体价值。...

    PHP_万能表单+7.7.5.zip

    【PHP 万能表单】是一种灵活且功能强大的表单构建工具,专为开发者设计,以便于创建和管理各种类型的在线表单。在本压缩包"PHP_万能表单+7.7.5.zip"中,包含了版本号为7.7.5的智慧表单流程,这通常意味着该软件已经...

    activiti工作流动态表单,外置表单,普通表单demo

    activiti三种表单的demo实现 运行方式: 1,修改连接的数据库 2,sql文件在resources\sql下 3,访问地址http://localhost:8080/activiti-demo/main/index

    漂亮的css表单样式

    1. **颜色搭配**:使用合适的颜色可以提升表单的视觉吸引力。例如,背景色、文字颜色、边框颜色以及按钮颜色等都需要协调统一,以创造舒适和谐的视觉效果。 2. **字体与排版**:选择易读的字体,调整字体大小和行高...

    万能表单 亲测可用

    1、支持新建N个表单主题,解决所有表单的应用场景 2、自定义表单模型(自定义字段支持字符串、数字、单选、多选、下拉、日历、时间、邮件、省市区、上传图片),每个自定义字段支持自定义描述(字段提示),支持关联会员...

Global site tag (gtag.js) - Google Analytics