& & 很久以前Roger Johansson就在他的blog上做了一个用样式控制表单元素的测试, 告诉我们企图用样式控制表单元素是一件不可能的事情& & using CSS to style form controls to look exactly the same across browsers and platforms is im……
声明：该文章系网友上传分享，此内容仅代表网友个人经验或观点，不代表本网站立场和观点；若未进行原创声明，则表明该文章系转载自互联网；若该文章内容涉嫌侵权，请及时向
论文写作技巧
上一篇：下一篇：
相关经验教程可以对bootstrap中的input设置高度吗？
在bootstrap中，input已有calss .form-control 可以对其设置高度吗？若可以。是在什么情况下。。谢谢
写下你的评论...
Copyright (C)
All Rights Reserved | 京ICP备 号-2本文讲的是用CSS控制输入框input样式，悬停交互如何实现？，
我们在制作表单的时候，往往希望有鼠标悬停交互效果。实现这样的效果，我们有多种方法：
1、在xhtml中直接写入onmouseover、onmouseout脚本就可以实现了，但这样就违背了web标准所倡导的内容、表现相分离的原则。以
我们在制作表单的时候，往往希望有鼠标悬停交互效果。实现这样的效果，我们有多种方法：
1、在xhtml中直接写入onmouseover、onmouseout脚本就可以实现了，但这样就违背了web标准所倡导的内容、表现相分离的原则。以后若要对此进行修改也将会很繁琐。这样直接写入xhtml也会让页面代码增加，如果只是一个input输入框或许是无所谓的，如果是几十个几百个，增加的字节数就很宠大了。
2、在xhtml中加入小脚本，鼠标经过时可以切换CSS。具体内容请看这篇。虽然实现了内容、表现相分离，以后的修改也会很方便。但同样会让页面代码增加。
　　我们有没有更好的办法来实现输入框input样式悬停交互的效果呢？
　　我们今天就讨论这样的方法，直接在CSS文件中写入悬停交互效果的小脚本。不但实现了内容与表现分离，而且使xhtml代码减小，促进了代码重用、更加的优化。
　　这一方法的原理，主要是应用CSS的expression，关于expression的更多介绍，请看这篇文章。我们看下面的CSS代码：
input {star : expression(
onmouseover=function(){this.style.borderColor="#060"},
onmouseout=function(){this.style.borderColor="#c00"})}
上面的代码，声明了，当鼠标移上去的时候，边框的颜色是#060，当鼠标移除的时候边框的颜色是#c00。我们看一下运行效果：
当然，你也可以这样做。我们来看看下面的运行效果：
在定义输入框input样式悬停交互效果的同时，你可以单独的为input输入框另外定义class类，用类与expression同时控制input输入框。更多的东西需要你自己多思考，多试验了。：）
以上是云栖社区小编为您精心准备的的内容，在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索css
input输入框样式、input输入框漂亮样式、input 输入框样式 css、html input输入框样式、input输入框样式修改，以便于您获取更多的相关知识。
为您提供简单高效、处理能力可弹性伸缩的计算服务，帮助您快速构建更稳定、安全的应用，提升运维效率，降低 IT 成本...
RDS是一种稳定可靠、可弹性伸缩的在线数据库服务。支持MySQL、SQL Server、PostgreSQL、高...
云栖社区()为您免费提供相关信息，包括
的信息，还有input输入框样式、input输入框漂亮样式、input 输入框样式 css、html input输入框样式、input输入框样式修改等
，所有相关内容均不代表云栖社区的意见！用户名：百度技术
文章数：403
评论数：154
访问量：1271642
注册日期：
阅读量：1297
阅读量：3317
阅读量：429642
阅读量：1117625
51CTO推荐博文
很久以前 Roger Johansson 就在他的 blog 上做了一个
using CSS to style form controls to look exactly the same across browsers and platforms is impossible
甚至 css2.1 规范中也没有明确这方面的规定 , 而是打算将它 fix in future
CSS 2 . 1 does not define which properties apply to form controls and frames, or how CSS can be used to style them. User agents may apply CSS properties to these elements. Authors are recommended to treat such support as experimental. A future level of CSS may specify this further.
所以如果想要让表单元素在各个浏览器下完全一致 , 最好的解决方法莫过于完全不理会操作系统的样式 , 用自定义的 ui 风格 , 就像 bing 或 Google 的 Jazz UI 那样
然而 , 这会导致界面和用户的系统格格不入 , 目前 google 主要还是针对浏览器做了些特殊处理 , 如 webkit 下用 gradient 使得按钮看上去好些
mac 下 webkit 的按钮不好控制
本文将就输入框高度的问题进行调研 , 寻找更好的解决方法
输入框高度
首先 , 这个调研的一个主要原因是 , 搜索结果页打算进入标准模式 , 这会导致盒模型的变化 , 造成输入框高度和原来不一样 , 所以为了和线上效果保持一致 , 我们需要找到一个最佳的解决方案
有同学可能会不解 , 有那么难么 ? 设置一个 height 不就解决了么 ?
&input type= &text& style= &height:28px& /&
然而 , 经测试发现这里面的细节问题还是还挺多 , 由于资源有限 , 这里只测试了主要的浏览器和平台 , 包括目前主要用到的 5 个浏览器
&&&&&&&&& IE6(xp)
&&&&&&&&& IE7(xp)
&&&&&&&&& IE8(win7)
&&&&&&&&& Firefox 3.5(xp)
&&&&&&&&& Firefox 3.5(win7)
&&&&&&&&& Firefox 3.5(mac 10.6.2)
&&&&&&&&& Firefox 3.5(ubuntu 10.4)
&&&&&&&&& Chrome 5(xp)
&&&&&&&&& Chrome 5(win7)
&&&&&&&&& Chrome 5(mac 10.6.2)
&&&&&&&&& Chrome 5(ubuntu 10.4)
通过设定 height 的方式
我们的目标是和目前搜索框大小保持一致 , 既 28px
首先测试的是最简单的 height, 先看目前线上的方案 ( 简单起见就直接写到 style 中了 )
&input type= &text& style= &font: 16 height: 1.78 padding-top:2px& /&
从样式上推导 , 由于盒模型问题 , 在 IE 下的大小将是 1.78 * 16 = 28px, 而 Firefox 等浏览器应该是 1.78 * 16 + 2px + border-width * 2 = 30 + ? px
测试结果是
height + padding-top + padding-bottom + border-top-width + border-bottom-width
21 + 2 + 1 + 2 + 2 = 28
21 + 2 + 1 + 2 + 2 = 28
21 + 2 + 1 + 2 + 2 = 28
Firefox 3.5(xp)
21 + 2 + 1 + 2 + 2 = 28
Firefox 3.5(win7)
23 + 2 + 1 + 1 + 1 = 28
Firefox 3.5(mac 10.6.2)
19 + 2 + 1 + 3 + 3 = 28
Firefox 3.5(ubuntu 10.04)
19 + 2 + 1 + 3 + 3 = 28
Chrome 5(xp)
21 + 2 + 1 + 2 + 2 = 28
Chrome 5(win7)
21 + 2 + 1 + 2 + 2 = 28
Chrome 5(mac 10.6.2)
21 + 2 + 1 + 2 + 2 = 28
Chrome 5(ubuntu 10.04)
21 + 2 + 1 + 2 + 2 = 28
效果相当理想 , 所有浏览器都是 28px, 看来即使是 Firefox 和 Chrom 在 quirks 模式下的 input 都没有遵循盒模型 , 所以线上的输入框高度在各个浏览器下很完美地保持一致
然而如果是在 standards 模式下 , 结果则是
height + padding-top + padding-bottom + border-top-width + border-bottom-width
28 + 2 + 1 + 2 + 2 = 35
28 + 2 + 1 + 2 + 2 = 35
28 + 2 + 1 + 2 + 2 = 35
Firefox 3.5(xp)
28 + 2 + 1 + 2 + 2 = 35
Firefox 3.5(win7)
28 + 2 + 1 + 1 + 1 = 32
Firefox 3.5(mac 10.6.2)
28 + 2 + 1 + 3 + 3 = 37
Firefox 3.5(ubuntu 10.04)
28 + 2 + 1 + 3 + 3 = 37
Chrome 5(xp)
28 + 2 + 1 + 2 + 2 = 35
Chrome 5(win7)
28 + 2 + 1 + 2 + 2 = 35
Chrome 5(mac 10.6.2)
28 + 2 + 1 + 2 + 2 = 35
Chrome 5(ubuntu 10.04)
28 + 2 + 1 + 2 + 2 = 35
就仅仅加了一句 &!DOCTYPE html& , 却导致浏览器差距变得如此大 , 仔细观察发现 , 主要问题在 Firefox 上 它的 border 在 win7 下是 1 像素 , xp 下是 2 像素 , mac 下是 3 像素 , 令人很头疼 , 于是打算换一种方案试试
padding 的方式
由于 Firefox 的 border 问题 , 设定 height 是不可能保证高度一致的 , 除非判断再去判断操作系统类型 , 但那样做太麻烦了 , 而且说不定 mobile 版又不一样
那是否可以不通过设置 height 来控制 ? 在目前的大搜索首页也是 standards 模式 , 它是采用 padding 的方式来实现 28px 的高度的
&input type= &text& style= &font: 16 padding:3px& /&
这种写法的测试结果是
height + padding-top + padding-bottom + border-top-width + border-bottom-width
18 + 3 + 3 + 2 + 2 = 28
18 + 3 + 3 + 2 + 2 = 28
18 + 3 + 3 + 2 + 2 = 28
Firefox 3.5(xp)
19 + 3 + 3 + 2 + 2 = 29
Firefox 3.5(win7)
19 + 3 + 3 + 1 + 1 = 27
Firefox 3.5(mac 10.6.2)
20 + 3 + 3 + 3 + 3 = 32
Firefox 3.5(ubuntu 10.04)
19 + 3 + 3 + 3 + 3 = 31
Chrome 5(xp)
19 + 3 + 3 + 2 + 2 = 29
Chrome 5(win7)
19 + 3 + 3 + 2 + 2 = 29
Chrome 5(mac 10.6.2)
18 + 3 + 3 + 2 + 2 = 28
Chrome 5(ubuntu 10.04)
19 + 3 + 3 + 2 + 2 = 29
在不设定输入框高度的情况下 , 浏览器会自行指定一个 , 而且都有差距 , mac 上的 Firefox 更是高出了 4 像素 , 但总的来说 , 效果虽然不完美 , 但还是可以接受 , 大部分情况下都只差一个像素
然而这种方法带来了很多不确定性 , 内容区的高度是随着字体大小而变的 , 假设 font-size 是 14px, 浏览器的高度又保持一致了
Firefox 3.5(xp)
Firefox 3.5(win7)
Firefox 3.5(mac 10.6.2)
Firefox 3.5(ubuntu 10.04)
Chrome 5(xp)
Chrome 5(win7)
Chrome 5(mac 10.6.2)
Chrome 5(ubuntu 10.04)
是否还有更好的方案呢 ?
box-sizing
height 和 padding 都无法完美控制输入框高度 , 而 border 的大小又不能改 , 难道就真的没办法了么 ? 不禁怀念 quirks 模式下的方便 , 设定一个高度就完美了 , 要是能既进 standards 模式 , 又能用到旧盒模型就好了 , 很自然地就想到了一个从来没用过的 css 属性 box-sizing, 以前一直没想好这属性到底能用在哪里 , 终于这下派上用场了 , 使用它我们就可以解决 Firefox 下 3 种 border 的区别 , 让 Firefox 自己去算内容区的高度
然而由于 IE6/7 不支持这个属性 , 所以需要写 hack, 由于 IE 下的默认 border 值是 2, padding 是 1, 所以 height 需要减 6 像素 , 也就是
-moz-box-sizing : border-box ;
-webkit-box-sizing : border-box ;
box-sizing : border-box ;
height : 28px ;
* height : 22px ;
这样 , 就能保证绝大部分的浏览器下效果一致了 , box-sizing 属性的支持情况如下表所示 , 来自 ,
Lowest Version
Support of
Internet Explorer
box-sizing
Firefox (Gecko)
-moz-box-sizing
box-sizing
Safari (WebKit)
-webkit-box-sizing
不过 , 事情还没有结束 , 刚才假定了 IE 下默认 padding 是 1 像素 , 然而目前很多 css reset 都会将 input 的 padding 设为 0, 于是 , IE 下的差别将不是 6 像素 , 而是 4 像素 , 所以为了避免受到影响 , 建议将 padding 设为 0
padding-top : 0 ;
padding-bottom : 0 ;
height : 28px ;
* height : 24px ;
浏览器在 quirks 下的实现方法
回过头来看 Firefox 和 Chrome 在 quirks 模式下使用了非标准的盒模型 , 看样子是有意去做的 , 它是如何实现的呢 ?
于是在 webkit 源码中寻找 , 一开始以为它是在源码中对 quirks 下的 input 做了特殊处理 , 但没看找到又什么特别的地方 , 而在看到计算 box 高度的时候
int RenderBox::calcContentBoxHeight( int height) const
&&& if (style()-&boxSizing() == BORDER_BOX)
&&&&&&& height -= (borderTop() + borderBottom() + paddingTop() + paddingBottom());
&&& return max( 0 , height);
忽然想到 , 会不会是通过浏览器默认样式来实现的呢 ? 将这种特殊的逻辑直接写在代码中确实太恶心了 , 既然支持 box-sizing 属性 , 直接将它写在 quirks 的默认样式不就完美解决了么
果然 , 在 Firefox 的 res/quirk.css 中发现了这句
* Quirk: Use border-box box sizing for text inputs, password inputs, and
* textareas.& (b=184478 on why we use content-box sizing in standards mode)
/* Note that all other &input&s already use border-box
sizing, so we're ok with this selector */
input :not ([ type = image ]), textarea {
& -moz-box-sizing: border -
在 webkit 源码中的 WebCore/css/quirks.css 发现了这句
/* This will apply only to text fields, since all other inputs already use border box sizing */
input :not ([ type = image ]), textarea {
&&& -webkit-box-sizing: border -
原来浏览器就是这么解决的 , 那么在标准模式下用它将是一种比较好的方案
one more thing
不过这种写法在 Firefox 3.5 以下的版本会有个问题 , 那就是输入框内容将无法垂直居中 , 以英文为例 , 3.5 中和顶部的差距是 5 像素 , 而 3.6 是 7 像素 , 目前还没想到解决方案
幸好在 Firefox 3.6 中解决了这个问题 , 而且 3.5 会默认升级到 3.6, 所以这个问题也就不需要考虑了
从这个例子可以痛苦地体验 , 如果没有统一的规范 , 要兼容不同浏览器是如此的困难 , 而且这还仅仅是一个很不完全的测试 , 好在浏览器还是尽可能做到了最大兼容 , 比如 , 假设 windows 下默认主题和经典主题有区别 , 就意味着所有 windows 下的测试都要乘 2.
【本文首发于：
【本文出自 “” 博客，请务必保留此出处
了这篇文章
类别：┆阅读(0)┆评论(0)