这个问题,困扰好几次了,也用过其它方法解决,但相对还是比较复杂,研究来研究去,还是用下面这个方法比较快而有效。
不同浏览器对文本框行高line-height的处理
除IE内核浏览器外,缺省line-height时都会自适应文本框的height。
IE下line-height对文本框有效,加上与相同的height后可以让IE也垂直居中。line-height超过height时,文本框获得焦点后拖动鼠标或按 上下键会出现上下滚动的现象。
Webkit内核下,当缺省line-height是,文本会自适应文本框height。 并且line-height对其有效。
Geoko下,它的值会随font-size的改变而改变(可以通过firebug来看计算样式),而不能由 网页开发人员来定义。
Geoko下,文本框获得焦点时的光标的大小由文本框的height决定,基本等于文本框的height。
Opera的表现最为优雅,line-height完全无效,文本始终垂直居中,光标也不会出现Geoko的 问题。
其他实现文本框文字垂直居中的解决方案
利用padding,比如taobao.com、yahoo.com……
利用font-size,比如google.com,用增大字体来撑高文本框。
分享到:
相关推荐
label 文字与input 垂直居中对齐不容易调好,不过使用margin-top负值可解决label文字与input垂直居中对齐问题
很老的问题了,如今再次碰到,记录下来,给后来者方便!...等等… 解决办法: 复制代码代码如下: input[type=”reset”]::-moz-focus-inner, input[type=”button”]::-moz-focus-inner, input[typ
C#编程 WinForm窗体开发 InputText(源码)C#编程 WinForm窗体开发 InputText(源码)C#编程 WinForm窗体开发 InputText(源码)C#编程 WinForm窗体开发 InputText(源码)C#编程 WinForm窗体开发 InputText(源码)C#编程 ...
1、内容自动垂直居中 2、默认提示文字显示灰色 3、单击后变为空 复制代码代码如下: <input type=”text” name=”wd1″ id=”qy_1″ maxlength=”100″ style=”color:gray;width:199px;height:30px;line-height...
浏览器支持 所有浏览器都支持 line-... 解决这个问题可以用pading设置上下填充,但是如果文本框有背景图片的话就会向下凸出一块,此时可以把max-height值设为height的值。 但为什么会出现不居中,实在是搞不明白。
分享一个用纯 CSS3 实现的,漂亮的 input 输入框动画样式库-Text input love。 点击每个输入框都用不同的动画效果,始终显示标签label,并显示 placeholder(占位符)文本。 演示地址:...
本文实例讲述了CSS实现同一行的图片和文字垂直居中对齐的方法。分享给大家供大家参考。具体分析如下: 有些朋友会发现,如果一行内容中有图片有文字的话,文字往往会自动的底部对齐,影响美观,那如何让它们相对于...
jquery input text文本框模拟select框美化 jquery input text文本框模拟select框美化 jquery input text文本框模拟select框美化 jquery input text文本框模拟select框美化
资源分类:Python库 所属语言:Python 资源全名:pygame-textinput-1.0.1.tar.gz 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
一直以来,在HTML中,img input select button 这里元素,垂直对齐,比较难。结果我长大了。我发现了一个现像,其实解决这些问题只是一句话的事。
PIXI.TextInput-pixi.js的插件 关于 pixi.js的此插件提供了一种将文本输入添加到pixijs阶段的便捷方法。 输入本身是一个HTML <input>元素,根据PIXI-DisplayObject给出的转换,该元素位于舞台的上方。 该框在...
kivy之TextInput部件的属性实操练习源码
html5 input placeholder文本占位符动画插件
表单页面,为了使表单元素和文字都垂直居中对齐,加个样式input,select{vertical-align:middle},文本框和下拉框都没问题,但是单选框和复选框就杯具了。 大多表现:单选,复选和文字无间距,单选文字偏上,复选偏上...
JS 仿支付宝input文本输入框放大组件,基于Jquery动态显示
DOM3中引入了文本事件,其中之一 textInput 。当用户再可编辑区域输入字符时触发该事件。
本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法。分享给大家供大家参考。具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监听文本框 value 值的变化,然后...