CSS控制input样式和悬停交互

开发 前端
你对用CSS控制输入框input样式和悬停交互的方法是否了解,我们在制作表单的时候,往往希望有鼠标悬停交互效果。实现这样的效果,我们有多种方法,这里和大家分享几种。

本文向大家描述一下用CSS控制输入框input样式和悬停交互的方法,直接在CSS文件中写入悬停交互效果的小脚本,不但实现了内容与表现分离,而且使xhtml代码减小,促进了代码重用、更加的优化。

用CSS控制输入框input样式和悬停交互

我们在制作表单的时候,往往希望有鼠标悬停交互效果。实现这样的效果,我们有多种方法:

  1、在xhtml中直接写入onmouseover、onmouseout脚本就可以实现了,但这样就违背了web标准所倡导的内容、表现相分离的原则。以后若要对此进行修改也将会很繁琐。这样直接写入xhtml也会让页面代码增加,如果只是一个input输入框或许是无所谓的,如果是几十个几百个,增加的字节数就很宠大了。

  2、在xhtml中加入小脚本,鼠标经过时可以切换CSS。具体内容请看这篇文章。虽然实现了内容、表现相分离,以后的修改也会很方便。但同样会让页面代码增加。

我们有没有更好的办法来实现输入框input样式悬停交互的效果呢?

  我们今天就讨论这样的方法,直接在CSS文件中写入悬停交互效果的小脚本。不但实现了内容与表现分离,而且使xhtml代码减小,促进了代码重用、更加的优化。

  这一方法的原理,主要是应用CSS的expression,关于expression的更多介绍,请看这篇文章。我们看下面的CSS代码:

ExampleSourceCode

  1. input{star:expression(  
  2. onmouseover=function(){this.style.borderColor="#060"},  
  3. onmouseout=function(){this.style.borderColor="#c00"})}  
  4.  

  上面的代码,声明了,当鼠标移上去的时候,边框的颜色是#060,当鼠标移除的时候边框的颜色是#c00。我们看一下运行效果:

SourceCodetoRun

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <metahttp-equivmetahttp-equiv="Content-Type"
  6. content="text/html;charset=utf-8"/> 
  7. <title>52css.com</title> 
  8. <styletypestyletype="text/css"> 
  9. <!--  
  10. input{border:1pxsolid#c00;}  
  11. input{star:expression(  
  12. onmouseover=function(){this.style.borderColor="#060"},  
  13. onmouseout=function(){this.style.borderColor="#c00"})}  
  14. --> 
  15. </style> 
  16. </head> 
  17. <body> 
  18. 姓名:<inputtypeinputtype="text"/><br/> 
  19. 年龄:<inputtypeinputtype="text"/><br/> 
  20. 性别:<inputtypeinputtype="text"/><br/> 
  21. 手机:<inputtypeinputtype="text"/><br/> 
  22. 地址:<inputtypeinputtype="text"/><br/> 
  23. </body> 
  24. </html> 
  25.  

[可先修改部分代码再运行查看效果]

在定义输入框input样式悬停交互效果的同时,你可以单独的为input输入框另外定义class类,用类与expression同时控制input输入框。更多的东西需要你自己多思考,多试验了。:)
 

【编辑推荐】

  1. CSS Sprites对CSS布局的意义
  2. CSS伪类的概念及作用
  3. CSS盒模型(BoxModel)用法详解
  4. 解析四大CSS属性值选择器用法
  5. 专家推荐 DIV CSS表单布局的五个小技巧

 

 

责任编辑:佚名 来源: 52css.com
相关推荐

2010-08-23 10:30:05

CSS超链接

2010-09-06 14:11:32

CSS

2010-09-09 12:49:58

鼠标悬停tip效果CSS

2010-08-30 13:29:06

超链接CSS

2010-08-24 13:05:23

CSS超链接

2017-07-20 11:11:39

前端CSS书写规范

2022-03-30 14:34:21

鸿蒙HarmonyOScss

2022-12-28 08:16:30

CSS新规范样式

2010-09-13 13:44:35

CSS表格CSS表单

2010-09-06 10:50:50

CSS边框

2023-07-14 07:52:37

CSS优先级Design

2022-03-22 09:07:34

开发CSS技术

2010-08-26 15:18:27

CSS样式

2022-11-28 08:45:56

前端CSS

2010-08-31 09:39:17

CSS样式表

2010-08-31 12:42:22

CSS a标签

2014-04-03 10:16:44

JavaScriptCSS

2010-09-09 11:16:06

CSS交互

2010-08-23 10:43:21

DIVCSS

2010-09-01 10:09:32

CSS样式
点赞
收藏

51CTO技术栈公众号