总结一下,在给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. nginx 学习笔记【持续更新...】

    1.如果在安装过程中出现以下错误 需要安装pcre库 解决方案:yum install pcre 2.如果nginx启动提示端口被占用,则停止该端口的服务再启动nginx,一般为httpd服务 解决方 ...

  2. php pdo mysql数据库操作类

    <?php namespace iphp\core; use iphp\App; /** * 数据库操作基类 基于pdo * @author xuen * 支持链式操作,支持参数绑定 * 说明1 ...

  3. SQL字符型字段按数字型字段排序实现方法(转)

    由于是按字母顺序排列,所以123排在了2的前面,显然不符合我们的要求,那么怎样才能按照我们预想的数字顺序排序呢 ORDER BY `meta_value`   那么按得分排序得到的结果可能是:1101 ...

  4. 图像 - 创建 头像V1.0

    byte[] logo //处理群头像信息 //byte[] logoByte = Convert.FromBase64String(logo); ////1.0 System.IO.MemorySt ...

  5. linux----suid\sgid

    1.suid和sgid 都是针对二进制程序来说了,bash脚本不在它的作用范围. 2.如果一个二进制文件设置有suid,那么在userA用户执行它时,会以文件所属用户的身份来执行.sgid同理: 3. ...

  6. Linux04--文本编辑器vim

    1.Linux系统下常用的文本编辑器介绍 •  命令行方式      vi/vim: 类UNIX操作系统中常用的内置编辑器,习惯操作后功能强大.      pico或nano:一种风格很像Micros ...

  7. Gentoo Linux 学习笔记1

         Gentoo Linux是一个基于portage进行包管理的Linux发行版,最早版本始于2002年.其官方官网为http://www.gentoo.org 目前,Gentoo Linux已 ...

  8. DIV+CSS规范命名

    一.命名规则说明: 1).所有的命名最好都小写2).属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="div ...

  9. JavaEE Tutorials (23) - 资源适配器和契约

    23.1什么是资源适配器362 23.1.1管理契约363 23.1.2通用工作上下文契约364 23.1.3出站和入站契约36423.2元数据注解36523.3公共客户端接口36623.4对Java ...

  10. 克鲁斯卡尔(Kruskal)算法

    # include <stdio.h> # define MAX_VERTEXES //最大顶点数 # define MAXEDGE //边集数组最大值 # define INFINITY ...