总结一下,在给input标签写CSS时需要注意的有以下几点:

  一、不要给属性为text的input标签设置高度,这样无法让IE浏览器下输入框中的文字垂直居中显示。尽管你后来想要通过设置padding属性来让文字居中,你会发现根本没法让它在Firefox和IE中取得一致的效果。正确的做法是直接给input标签设置padding属性,通过内边距属性来调节input标签的高度,而且这时IE中的文字也是居中显示的。

  二、input标签不会继承父元素的字体样式和大小,需要直接给input标签声明font-family和font-size属性。

  三、给属性为text的input标签设置合适的width属性和padding属性,确保其中的文字在合适的范围内出现。尤其是使用了背景图片后,要让文字框的大小和背景图片的大小相当,这样看上去更加美观。

CSS---input标签注意的更多相关文章

  1. [CSS]Input标签与图片按钮对齐

    页面直接摆放一个input文本框与ImageButton图片按钮,但是发现没有对齐: <input type="text" id="txtQty" /&g ...

  2. css中的img和input标签

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

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

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

  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. 使用CSS3中的input标签与lable标签组合实现banner图的切换

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

  8. html css <input> javaScript .数据类型 JS中的函数编写方式 BOM总结 DOM总结

    Day27  html css div 块标签. 特点: 独占一行,有高度和宽度 span 行元素. 特点:在同一行显示,当前行满了自动去下一行显示. 不识别高度和宽度 1.1.1.1 2.输入域标签 ...

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

    jQuery计算文本宽度的原理是利用html提供的<pre>标签,向dom中动态添加<pre>标签,标签里的内容就是要测试长度的文本,获取完长度之后再删除刚才添加的<pr ...

  10. 关于 html input标签的几个常用操作

    1.清除 input 标签默认样式 input { -moz-appearance: none; outline: 0; text-decoration: none; outline: none; b ...

随机推荐

  1. struts2源码调试环境的搭建

    源码之前,了无秘密. 说一句逼格很高的话来镇镇场子. 这两天在看陆舟的<Struts2技术内幕>,一边看脑子一边冒出四个字:相见恨晚.极力推荐想了解Struts2的人看看这本书,之前一直在 ...

  2. Android 不通过USB数据线调试的方法

    在开发Android应用时,通常情况下是通过USB数据线连接设备和计算机,但对于一些需要使用USB设备的应用,这种方法就碰到了麻烦,手机的USB接口已经和外接的USB设备连接,无法再连数据线,此时可以 ...

  3. js查找元素

    1.className <!DOCTYPE html> <html> <head lang="en"> <meta charset=&qu ...

  4. Ajax制作无刷新评论系统

    index.html <script src="jquery.min.js"></script> <script> $(function(){ ...

  5. ODI 11g Studio 修改界面语言

    {ODI_HOME}/oracledi\client\ide\bin找到ide.conf 添加AddVMOption -Duser.language=enAddVMOption -Duser.regi ...

  6. Protel在PCB中添加汉字

    使用Protel 99SE的工程人员都知道Protel在PCB绘制中是不支持汉字输入的,但作为工厂生产调试的方便,不可避免的要在PCB上制作中文标示,有时为说明板子的用途,注意事项等都要输入中文丝印, ...

  7. Flex中如何通过设置GridLines对象的horizontalAlternateFill样式交错显示LineSeries图表背景颜色的例子

    原文 http://blog.minidx.com/2008/11/27/1652.html 接下来的例子演示了Flex中如何通过设置GridLines对象的horizontalAlternateFi ...

  8. Android UI ActionBar功能-ActionBarProvider的使用

    分享功能是很多App都有一个功能,ActionBarProvider可以实现分享功能: 3.0以前的版 本和3.0以后的版 本的区别: public class MainActivity extend ...

  9. SVN 权限配置具体说明

    svnserve权限配置 分配权限时.文件夹应该应该遵从从大到小,权限应该从小到大的规则 即:文件夹从根文件夹開始,权限从没有权限(为空就可以)到可写再到可读写. 提示:文件夹的訪问权限既能够分配给组 ...

  10. jcenter那些事儿

    jcenter是一个server托管在bintray.com的maven仓库. in project's build.gradle file allprojects { repositories { ...