做网站时经常有这样那样的需要,要美化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. Units specified don't exist SHSUCDX can't install

    重装系统,出现“Units specified don't exist SHSUCDX can't install”怎么办? 昨天,我们领导弄了个联想Thinkpad T510i的笔记本,本来预装的是 ...

  2. UVA 10652 Board Wrapping 计算几何

    多边形凸包.. .. Board Wrapping Time Limit: 3000MS Memory Limit: Unknown 64bit IO Format: %lld & %llu ...

  3. 【Linux】od命令

    用途 od命令主要用于查看非文本文件,通过指定该命令的不同选项可以以十进制.八进制.十六进制和ASCII码来显示 全称 od的全称为:Octal Dump 参数 -t :后面接各种类型的显示方式 a ...

  4. 无法启动此程序因为计算机中丢失 xxx.dll

    “无法启动此程序因为计算机中丢失 XXX.dll” 这类问题在 visual studio 中很常见… 许久不和VS打交道,一碰各种坑… 这是在 VS 2015 Community 出现的问题: (1 ...

  5. List、Set、Map常见集合遍历总结

    Java中的集合有三大类,List.Set.Map,都处于java.util包中,List.Set和Map都是接口,不能被实例化,它们的各自的实现类可以被实例化.List的实现类主要有ArrayLis ...

  6. Python3内置字符串方法详解

    官网文档地址:https://docs.python.org/3/library/stdtypes.html#string-methods基于 Python 3.X 版本 str.capitalize ...

  7. python开发者通过国内镜像安装pip包

    对于Python开发用户来讲,PIP安装软件包是家常便饭.但国外的源下载速度实在太慢,浪费时间.而且经常出现下载后安装出错问题.所以把PIP安装源替换成国内镜像,可以大幅提升下载速度,还可以提高安装成 ...

  8. ui-router详解(二)ngRoute工具区别

    我们了解 angular.js 是一种富客户端单页面应用,所以要在一个页面呈现不同的视图,路由起到了至关重要的作用. angular.js 为我们封装好了一个路由工具 ngRoute ,它是一种靠ur ...

  9. Go语言核心之美 4.3-多返回值

    在Go语言中.函数能够有多个返回值,这个特性我们已经在之前的样例见过非常多,非常多标准库函数都会返回两个值,一个是期望得到的函数执行结果,另外一个是函数出错时的错误值. 以下的程序是findlinks ...

  10. 8086汇编之 CALL 和 RET指令

    Ret 和 call 也是转移指令,可是他们跟jmp不同的是,这两个转移指令都跟栈有关系. <1> ret 用栈中的数据改动IP的地址,从而实现近转移 ( ip ) = ( (ss)*16 ...