做网站时经常有这样那样的需要,要美化input ,于是CSS的美化必不可少。和程序人生的站长交流,他发给我这个。

下面是CSS样式

  1. input {
  2. border:1px solid #B3D6EF; 
  3. background:#ffffff;
  4. }
  5. input {
  6. star : expression(
  7. onmouseover=function(){this.style.backgroundColor="#D5E9F6"},
  8. onmouseout=function(){this.style.backgroundColor="#ffffff"})
  9. }

好处在于 不用在页面中写一堆一堆的onMouseover函数了

lolo 
有些问题需要注意下,这种写法有可能在IE6下造成浏览器卡死,目前做的一个旧出现了卡死现象...

2009年11月24日1:31:36 
这里引用下怪飞的一篇CSS优化的文章

引用
浏览器中 CSS Expression 特性的最大的问题:会反复执行,每秒钟可能执行了成百上千次,有严重的性能问题。 
如何对 CSS Expression 进行优化呢? 
至少:如果我们将 CSS Expression 在匹配的元素中仅执行一次,性能将会提升很大。 
old9 在 《CSS Expression Reloaded》一文中提供了一个解决方案:

引用
在 CSS Expression 语句体里,将触发该 Expression 的 CSS 属性重置。
  1. div {
  2. zoom: expression(function(el){el.style.zoom = "1"; alert(el.tagName);}(this));
  3. }

或者

  1. div {
  2. -singlex: expression(this.singlex ? 0 : (function(t) { alert(t.tagName); t.singlex = 0; } )(this));
  3. }

说明一下~: 
CSS Expression 执行在任意一个匹配的元素上。 
在 CSS expression 内, “this”关键字指向当前匹配的 HTML 元素。 
CSS 属性选用一些不常用的属性来触发,触发完重置回默认值。

这里是原文 
http://www.planabc.net/2009/09/21/optimization_of_css_eexpression/ 

引用
关于Expression,雅虎团队提到这些

18、避免使用CSS表达式(Expression)  
      CSS表达式是动态设置CSS属性的强大(但危险)方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中,使用CSS表达式可以实现隔一个小时切换一次背景颜色: 
      background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );  
如上所示,expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。expression方法在其它浏览器中不起作用,因此在跨浏览器的设计中单独针对Internet Explorer设置时会比较有用。 
      表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。 
      一个减少CSS表达式计算次数的方法就是使用一次性的表达式,它在第一次运行时将结果赋给指定的样式属性,并用这个属性来代替CSS表达式。如果样式属性必须在页面周期内动态地改变,使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS表达式,一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。  

使用css全面美化input标签的更多相关文章

  1. css中的img和input标签

    一般情况下,行内元素设置宽高是无效的,常见的有a标签.img和input也属于行内元素,但他们却可以设置宽高!!!! 查阅了一些资料才明白,原来css的元素还有另外一种分类方法,可替换元素,不可替换元 ...

  2. input标签写CSS时需要注意的几点(先收藏)

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-05-05) 飞鱼的声纳顶部的搜索框让我头疼了很长时间,原因是总不能获得跨浏览器的统一样式.主要的问题有这么两个:一是inpu ...

  3. 如何用input标签上传多个图片并回显

    本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图 我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input-file ...

  4. 一个input标签搞定含内外描边及阴影的按钮~

    自从怀孕以来,我就变得很是轻松,偶尔写一两个页面,或者偶尔调试一个两个bug,或者偶尔给做JS的同事打打下手,修改个bug什么......一个习惯于忙碌的工作的人,这一闲下来,感觉还真TM很不舒服-怎 ...

  5. 一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案

    最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了.为此百度了好久发现网上说的使用 ...

  6. input 标签实现带提示文字的输入框

    方法一:html5配合css3实现带提示文字的输入框(摆脱js): webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登 ...

  7. (转载)CSS分别设置Input样式(按input类型)

    (转载)http://www.uml.org.cn/html/201207202.asp   当你看到<input>这个html标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框? ...

  8. CSS分别设置Input样式(按input类型)

    当你看到<input>这个html标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框?一个复选框?……对,对,对,它们都对.也许你可能想不到,这个小小的input竟然可以创造出10 ...

  9. 使用CSS3中的input标签与lable标签组合实现banner图的切换

    在做网页时,我们经常可以碰到banner图的切换.对于那些JS薄弱的同学来说,这就很尴尬了.今天,我来告诉大家如何使用CSS做出banner图切换的效果. 这里,用到了lable标签与input的组合 ...

随机推荐

  1. javascript代码在线测试

    目前还不可用,有知道的怎么搞的,请告知我下,谢谢! alert("欢迎使用javascript在线测试工具");

  2. QtGui.QCalendarWidget

    A QtGui.QCalendarWidget provides a monthly based calendar widget. It allows a user to select a date ...

  3. Orcla 数据库复习2 --子查询和表连接

    子查询和表连接  ①.查询挣钱最多的人的名字  SELECT ename,sal FROM emp  WHERE sal=(SELECT MAX(sal) FROM emp);  ②.查询有哪些人的工 ...

  4. windows设置文件夹显示缩略图

      windows设置文件夹显示缩略图 CreateTime--2017年7月26日16:32:59Author:Marydon 为什么要显示缩略图? a.显示缩略图后,图片文件能够直接显示内容,不能 ...

  5. chrome 如何官网下载谷歌浏览器离线安装包

      如何官网下载chrome谷歌浏览器离线安装包 CreateTime--2017年7月4日08:38:30Author:Marydon 参考链接:http://jingyan.baidu.com/a ...

  6. xml xpath dta笔记

    xml: 有且只有一个根元素 默认utf-8 如果是中文且为不是utf-8的必须指定编码 声明的编码必须和文档的内容保持一致 well-formed XML :是否符合xml语法 valid xml: ...

  7. 比较全的log4j示例

    <?xml version="1.0" encoding="UTF-8"?> <configuration status="off& ...

  8. 【linux】FTP添加用户,设置权限和目录

    一.目的,新建一个用户 test2,登录ftp,它只有自己的主目录权限,其他同级和上级目录没有权限 二.ftp安装.配置 yum -y install vsftpd //通过yum来安装vsftpd ...

  9. 【转帖】为什么不要把ZooKeeper用于服务发现

    http://www.infoq.com/cn/news/2014/12/zookeeper-service-finding ZooKeeper是Apache基金会下的一个开源的.高可用的分布式应用协 ...

  10. PHP位运算符(转)

    例子 名称 结果 $a & $b And(按位与) 将在 $a 和 $b 中都为 1 的位设为 1. $a | $b Or(按位或) 将在 $a 或者 $b 中为 1 的位设为 1. $a ^ ...