总结一下,在给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. Android动画之硬件加速

    你的动画写出来卡嘛?流畅嘛 如果你想提升动画的性能,那就是用它-hardware layers. During animations your views may be redrawn each fr ...

  2. Thinkphp3.2使用scws中文分词 提取关键词

    SCWS 是 Simple Chinese Word Segmentation 的首字母缩写(即:简易中文分词系统).1.下载scws官方提供的类(这里使用的是pscws第四版的)http://www ...

  3. Python学习笔记(一)基础

    学习资料 跟着廖雪峰的Python教程学习Python,大家可以去官方网站查看学习教程.使用的Python版本为3.0.x,解释器为CPython.本系列博客为学习笔记,记录跟随廖老师所学知识,同时会 ...

  4. React 从0开始 消息传递

    React笔记 React 数据决定DOM 以往的做法是通过JS去操作DOM 将数据填充 JSX Jsx javascript xml HTML的结构组装到js中 jsx使用style的时候 不能直接 ...

  5. Spring中常用的hql查询方法(getHibernateTemplate())

    一.find(String queryString); 示例:getHibernateTemplate().find("from bean.User"); 返回所有User对象 二 ...

  6. C语言的本质(8)——副作用与顺序点

    C 语言中,术语副作用是指对数据对象或者文件的修改.例如以下语句 var = 99; 的副作用是把 var 的值修改成 99.对表达式求值也可能产生副作用,例如: se = 100 对这个表达式求值所 ...

  7. Kruskal-Wallis Test and Friedman test

  8. Controller中获取输入参数注解使用总结

    1.处理request的uri部分的参数(即restful访问方式):@PathVariable. 当使用restful访问方式时, 即 someUrl/{paramId}, 这时的参数可通过 @Pa ...

  9. jQuery学习笔记(一)——基础选择器、过滤选择器、表单选择器

    $()就是jQuery中的函数,它的功能是获得()中指定的标签元素.如演示样例中$("p")会得到一组P标签元素,当中"p"表示CSS中的标签选择器.$()中的 ...

  10. android开发之Animations的使用(二)

    android开发之Animations的使用(二) 本博文主要讲述的是android开发中的animation动画效果的使用,和上一篇博文不同的是,此次四种动画效果,主要使用的是xml文件实现的,提 ...