<!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>
分享到：
相关推荐
**JS日历DIV控件详解** 在网页设计中，日期选择功能是常见且重要的交互元素，它可以用于表单填写、事件预订等场景。JS日历DIV控件是一种使用JavaScript实现的轻量级日历组件，它通过在页面上动态创建一个可浮动的...
在网页开发中，日期控件(input输入框)是一种常见的用户界面元素，允许用户方便地选择日期，常用于表单填写、日程安排等场景。在本案例中，这个日期控件是通过JavaScript和CSS实现的，并且依赖于jQuery库。jQuery是一...
在众多功能中，为input元素添加日期选择控件是一个常见的需求，尤其在处理日期相关的表单时。"input js选择日期的控件"就是一种解决方案，它可以方便用户在网页上直观地选取日期，而非手动输入，提高数据的准确性和...
在这个特定的场景中，我们讨论的是一个第三方控件——IPInput，这是一款专门用于输入IP地址的控件，非常适合在需要用户输入网络配置或者进行IP相关操作的软件中使用。 首先，让我们深入了解一下如何在C++ Builder ...
因此，日历控件应具备响应式设计，能够在手机、平板和桌面等不同设备上正常工作。这可能涉及到CSS媒体查询和布局调整。 5. **国际化** 对于全球化的网站，日历控件需要支持多种语言。这可以通过设置控件的配置项...
本文将详细讲解如何使用jQuery在div中获取和操作input元素的值。 首先，理解基本的HTML结构是至关重要的。假设我们有一个包含input元素的div，其HTML代码可能如下所示： ```html <div id="myDiv"> <input type=...
1. **隐藏原生控件，使用CSS和JavaScript模拟**：将`input[type="file"]`设置为透明或者绝对定位使其脱离文档流，然后创建一个更美观的触发器（如一个`<button>`或`<div>`），通过JavaScript绑定事件监听器，当...
`input`标签在HTML中用于创建各种形式的用户输入控件。基本语法如下： ```html <input type="type" name="name" value="value" /> ``` 其中，`type`定义了输入控件的类型，`name`是控件的标识名，`value`则是默认...
一个时分秒控件示例（在一个HTML页面中单击input时显示时分秒控件）
"jquery封装的input file控件"是一种解决方法，通过jQuery库来改进文件上传控件的外观和交互体验。 jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画效果和Ajax交互等任务。在本案例中，开发者...
在HTML5中，`<input>` 控件增加了更多的类型，如电子邮件 (`email`)、电话 (`tel`)、日期 (`date`) 等，增强了表单数据验证和用户体验。了解并熟练运用这些控件，是成为一名优秀的前端开发者的基础。
本主题聚焦于“使用div实现的单选选择控件”，它是一种替代传统下拉框的选择方式，旨在提高用户体验并增加界面的可定制性。这种控件使用HTML的`<div>`元素和相关的JavaScript库，如jQuery，来实现类似单选按钮...
input边框变色，这个教程由小编亲自整理，亲测有效实用。当用户在输入框输入账号密码或文本时，边框颜色发生变化，边框变蓝、黄色等。需要的小伙伴赶快下载吧，本方法简单实用，输入框输入时边框颜色变化实用教程！
总结，"js+input时间日历控件代码及用法"这一资源提供了从JavaScript基础到高级应用的实践示例，涵盖了HTML、CSS、JavaScript事件处理、DOM操作、日期处理等多个方面，对于学习和提升前端开发技能非常有帮助。...
本项目标题为“基于input表单的时间控件”，这意味着它提供了一个用jQuery构建的、集成在`<input>`表单内的时间选择器。jQuery是一个强大的JavaScript库，简化了DOM操作、事件处理和动画效果，使得创建这种交互式...
为了克服这个问题，我们可以利用`div`元素配合JavaScript库如jQuery来构建自定义的复选选择控件。本篇将详细介绍如何使用`div`和jQuery实现一个复选选择功能。 首先，让我们了解`div`元素。`div`（division）是HTML...
日历控件是网页中常见的一种用户界面元素，它允许用户通过图形化界面选择日期，常用于预订系统、事件安排等场景。制作这样一个控件，我们可以从以下几个方面入手： 1. **HTML结构**： 首先，我们需要创建一个基本...
【标题】"input-Calendar,简单的jquery 日期选择控件" 这个标题提到的是一个基于jQuery的日期选择插件，名为input-Calendar。在Web开发中，日期选择器是一种常见的交互元素，用于用户输入或选择日期。jQuery是一个...
"js中动态加载div/input"指的是使用JavaScript来动态地创建、修改或删除HTML元素，如div（div元素是网页布局中最常用的部分）和input（输入框，用于用户交互）。这种技术允许开发者在页面加载后或者根据用户的某些...
<div class=col-xs-9 id=search_songs_a> 钢琴曲名称： <td><input type=text name=info[gqq_name] id=gqq_name style=width:200px;/> 演奏者： <td><input type=text name=info[gqq_player] id=gqq_...