制作表单的时候，实现鼠标悬停交互效果有多种方法:
1、在xhtml中直接写入onmouseover、onmouseout脚本就可以实现了，但这样就违背了web标准所倡导的内容、表现相分离的原则。以后若要对此进行修改也将会很繁琐。这样直接写入xhtml也会让页面代码增加，如果只是一个input输入框或许是无所谓的，如果是几十个几百个，增加的字节数就很宠大了。
2、在xhtml中加入小脚本，鼠标经过时可以切换CSS。具体内容请看这篇文章。虽然实现了内容、表现相分离，以后的修改也会很方便。但同样会让页面代码增加。
我们有没有更好的办法来实现输入框input样式悬停交互的效果呢？
我们今天就讨论这样的方法，直接在CSS文件中写入悬停交互效果的小脚本。不但实现了内容与表现分离，而且使xhtml代码减小，促进了代码重用、更加的优化。
这一方法的原理，主要是应用CSS的expression。
input {star : expression(
onmouseover=function(){this.style.borderColor="#99BBE8"},
onmouseout=function(){this.style.borderColor="#B5B8C8"})}
上面的代码，声明了，当鼠标移上去的时候，边框的颜色是#060，当鼠标移除的时候边框的颜色是#c00。我们看一下运行效果：
<!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>用CSS控制输入框input悬停交互样式</title>
<style type="text/css">
<!--
input {border:1px solid #B5B8C8;}
input {star : expression(
onmouseover=function(){this.style.borderColor="#99BBE8"},
onmouseout=function(){this.style.borderColor="#B5B8C8"})}
-->
</style>
</head>
<body>
姓名：<input type="text" /><br />
年龄：<input type="text" /><br />
性别：<input type="text" /><br />
手机：<input type="text" /><br />
地址：<input type="text" /><br />
</body>
</html>
你也可以这样做:
<!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>用CSS控制输入框input悬停交互样式</title>
<style type="text/css">
<!--
input {border:1px solid #B5B8C8; }
input {star : expression(
onmouseover=function(){this.style.backgroundColor="#DFE8F6"},
onmouseout=function(){this.style.backgroundColor="#FFFFFF"})}
.in40 {width:40px;}
.in80 {width:80px;}
.in120 {width:120px;}
.in200 {width:200px;}
-->
</style>
</head>
<body>
姓名：<input class="in80" type="text" /><br />
年龄：<input class="in40" type="text" /><br />
性别：<input class="in40" type="text" /><br />
手机：<input class="in120" type="text" /><br />
地址：<input class="in200" type="text" /><br />
</body>
</html>
以下是参考ext样式风格，自定义的显示，该样式触发的条件是文本框获取焦点与否
input{
margin-left:3;
border:1 solid #B5B8C8;
font: normal 11px tahoma, arial, helvetica, sans-serif;
star : expression(
onfocus=function(){
this.style.borderColor="#99BBE8";
this.style.backgroundColor="#DFE8F6";
},
onblur=function(){
this.style.borderColor="#B5B8C8";
this.style.backgroundColor="#FFFFFF";
}
);
分享到：
相关推荐
"15个CSS3动态输入框input框代码"是一个集合，它提供了多种不同样式的输入框效果，旨在提升用户体验，使网页交互更具有吸引力。下面将详细阐述这些知识点： 1. **CSS3选择器**：CSS3引入了更多精确的选择器，如类...
本资源“14种CSS3炫酷表单input输入框美化效果”正是围绕这一主题展开，旨在帮助开发者创造出更具吸引力和交互性的表单界面。 1. **边框动画效果**：通过CSS3的`border-radius`属性，可以创建圆角输入框，增强视觉...
本资源"输入框input样式，各种效果齐全"提供了一系列输入框样式的实例，旨在帮助开发者创建更加丰富多样的用户界面。 首先，我们要理解HTML中的`<input>`标签，它是创建输入框的基础。`<input>`标签是HTML的表单...
总的来说，"CSS3实现动态输入框input框特效"是通过巧妙运用CSS3的新特性，以提升网页表单的视觉吸引力和用户体验。结合JavaScript，我们可以进一步优化动态效果，比如在输入时实时显示字符数，或者在输入错误时给予...
2. **伪类选择器**：`:hover`、`:focus`、`:active`等伪类选择器可以分别控制鼠标悬停、获取焦点和按下状态时input框的样式，使得用户交互更具有反馈感。 3. **阴影效果**：CSS3的`box-shadow`属性可以创建输入框的...
标题为“好看的input输入框-合集-各种悬停、选中特效样式-HTML源码”的资源正致力于解决这一问题，提供了一系列精美的HTML输入框样式，以提升网页的美观度和用户交互体验。 HTML（HyperText Markup Language）是...
1. **CSS3选择器**：CSS3引入了许多新的选择器，如类选择器、ID选择器、伪类和伪元素选择器等，使得我们可以更精确地控制元素的样式。在输入框动画中，可能会用到`:hover`、`:focus`、`:valid`和`:invalid`等伪类，...
### CSS技巧：如何针对苹果手机优化输入框样式 在移动端Web开发中，经常会遇到不同设备浏览器对HTML元素渲染效果不一致的问题，特别是对于输入框（`<input>`）的默认样式，苹果手机上的Safari浏览器常常与其他...
制作表单的时候，实现鼠标悬停交互效果有多种方法: 1、在xhtml中直接写入onmouseover、onmouseout脚本就可以实现了，但这样就违背了web... 我们有没有更好的办法来实现输入框input样式悬停交互的效果呢？ 我们今天就
本讲座主要探讨了如何使用 CSS3 来控制 HTML5 表单的样式，包括字体、边框、背景和内边距等方面。 首先，我们来理解为什么需要控制表单样式。HTML5 中的 `<form>` 元素是一个块级元素，浏览器会为其赋予一些默认的...
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉效果和交互体验，其中之一就是能创建出各种动态的input文本框动画特效。这款特效专注于提供简单而美观的网址链接和邮箱格式输入框的焦点效果，增强...
描述提到“14种CSS3炫酷表单input输入框美化效果”，这表明这个压缩包内包含了一系列使用CSS3技术实现的文本输入框的视觉增强示例，旨在提升用户在交互过程中的体验。标签“css3”进一步确认了这些效果是通过CSS3的...
在这个特定的主题中，“Css输入框动画效果”和“jQuery Css输入框左侧图标和动画效果”主要涉及到如何利用CSS样式和jQuery库来美化网页中的输入框，同时增加动态元素，如动画和左侧图标，提升界面的视觉吸引力。...
本主题聚焦于“CSS3实现动态输入框input框特效”，这是一个能够提升用户体验、增加界面交互性的关键技术点。我们将深入探讨如何利用CSS3来创建具有吸引力的动态input框效果。 首先，CSS3的新特性之一是伪类选择器。...
在这个特定的项目中，"HTML5+CSS3源码_CSS3实现一款联系表单 输入框带小图标.rar.rar" 提供了一个使用HTML5和CSS3构建的联系表单，该表单设计独特，输入框带有小图标，这增加了用户的交互体验和界面的美观性。...
最后，为了使提示信息看起来更美观，我们可以使用CSS自定义提示框的样式。例如： ```css #tooltip { position: absolute; padding: 5px; background-color: #000; color: #fff; font-size: 12px; border-...
1. **伪类选择器**：如`:hover`、`:active`、`:focus`，用于在鼠标悬停、点击或获取焦点时改变按钮的样式，提升交互体验。 2. **颜色与背景**：通过`background-color`、`background-image`和渐变(`linear-gradient...
总结来说，使用CSS对`input[type=file]`进行样式美化是提高网页交互性的重要手段，通过巧妙地隐藏实际的文件选择输入框并设计吸引人的外观，我们可以创建出与网站风格一致且易于使用的文件上传按钮。
1. 获得焦点时的特效：使用`:focus`伪类，可以在输入框获取焦点时改变其样式，如边框颜色、背景色或阴影效果，以引导用户注意到当前活动的输入框。 ```css input:focus { border-color: #4CAF50; outline: none; ...