使用css全面美化input标签

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

下面是CSS样式

Js代码  

  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 属性重置。

Js代码  

  1. div {
  2. zoom: expression(function(el){el.style.zoom = "1"; alert(el.tagName);}(this));
  3. }

或者

Js代码  

  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标签

时间: 2024-08-08 01:26:28

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

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

(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-05-05) 飞鱼的声纳顶部的搜索框让我头疼了很长时间,原因是总不能获得跨浏览器的统一样式.主要的问题有这么两个:一是input标签的高度不能统一,Firefox和IE中的高度始终不能一致:二是在IE浏览器中属性为text的input标签中的输入文字不像标准浏览器中的那样垂直居中显示,而是靠输入框的左上角显示. 为了彻底解决搜索框的这些问题,我以GreenGaint主题搜索框的样式为准,重写了一遍代码并且以像素为单位测量了

css中的img和input标签

一般情况下,行内元素设置宽高是无效的,常见的有a标签.img和input也属于行内元素,但他们却可以设置宽高!!!! 查阅了一些资料才明白,原来css的元素还有另外一种分类方法,可替换元素,不可替换元素. a)可替换元素 浏览器根据标签的属性来决定元素的具体显示内容.如img标签,浏览器通过src属性读取图片信息(包括图片的宽高)来显示出来.input标签,通过它的type属性来决定它是文本域(type="text'),还是提交按钮(type="submit")等,对于表单元

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

本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图 我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input-file标签非常丑,我们美化一下它,不会的可以百度一下,就是外面套个盒子,设置input的opacity为0,然后外面的盒子设计成我们喜欢的样式即可,我就随便做了一下. 还是放一下源码,只谈效果,不放源码的都是耍流氓 这是body <body> <div class="uploadImgB

HTML简单登录和注册页面及input标签诠释

今天第一次接触HTML这种语言,虽然不能完全理解其中的意思,过去学的英语单词几乎也忘了差不多了,但是感觉进入这门语言学习之后就没有那么难了,一步一步来吧!下面巩固下今天学内容: HTML是一种超文本标记语言.HTML 标签是由尖括号包围的关键词,比如 <html>.HTML 标签通常是成对出现的,比如 <b> 和 </b>: <html> 与 </html> 之间的文本描述网页: <body> 与 </body> 之间的文

html5中form表单新增属性以及改良的input标签元素的种类

在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!DOCTYPE html><html> <head> <title>表单测试</title> <meta charset="utf-8" /> <!-- 在不支持h5的浏览器中,可以用CSS样式进行改写 --> &

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

最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了.为此百度了好久发现网上说的使用js来append操作,亲测了都不管用.除非把autocomplete=“off”关了,但这就不符合需求了 如图 网上说的改变-webkit-autofill的阴影背景是可以去除黄色背景的,但是图片依旧被覆盖了. input:-webkit-autofill{ box-shadow:0 0 0px

html+css学习笔记 2[标签]

img标签/a标签 <img src="图片地址" alt="图片名"/>  图片(单标签)alt属性 是图片名字,是给百度搜索引擎抓取使用:     a标签: 链接/下载/锚点 href地址等于标签id     target 链接打开方式     blank  新窗口     self     当前窗口     <base target="_blank"/> 定义页面链接默认打开方式   常见标签 div        

只用css来美化的上传表单按钮(抄的迅雷的)

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>文件上传</title><link href="css/reset.css" rel="stylesheet" type="text/css"><style type="text/css">.wei

jQuery计算文本宽度和input标签根据输入字符动态自适应宽度的实现

jQuery计算文本宽度的原理是利用html提供的<pre>标签,向dom中动态添加<pre>标签,标签里的内容就是要测试长度的文本,获取完长度之后再删除刚才添加的<pre>标签,从而可取到文本的大概长度了.为什么要用标签而不用其他标签呢,那来看看<pre>标签的特性吧:pre 元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留空格和换行符;而文本也会呈现为等宽字体. <pre>标签的一个常见应用就是用来表示计算机的源代码.需要注