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

(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-05-05)

飞鱼的声纳顶部的搜索框让我头疼了很长时间,原因是总不能获得跨浏览器的统一样式。主要的问题有这么两个:一是input标签的高度不能统一,Firefox和IE中的高度始终不能一致;二是在IE浏览器中属性为text的input标签中的输入文字不像标准浏览器中的那样垂直居中显示,而是靠输入框的左上角显示。

  为了彻底解决搜索框的这些问题,我以GreenGaint主题搜索框的样式为准,重写了一遍代码并且以像素为单位测量了一下在没有任何样式表的情况下<input>标签在默认浏览器中的实际差别。

  结果发现:input标签在type为text时,在Firefox和Safari中的默认高度为22像素(包括上下边框)宽度为146像素(包括左右边框),而在IE中的默认高度为24像素,而宽度却和Firefox和Safari是一致的,也是146像素。当 input标签在type为submit时,在Firefox中的高度为23像素(包括阴影),宽度为75像素。在Safari中高度为21像素,宽度为73像素,在IE中高度为为25像素、宽度为73像素。

  那么在样式化input标签时又该注意哪些问题呢?先来看下面经过样式化后,在不同浏览器中都有着良好表现的搜索框。

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

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

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

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

原文地址:http://www.php100.com/html/program/divcss/2013/0904/1245.html###

时间: 2024-08-03 10:11:24

input标签写CSS时需要注意的几点(先收藏)的相关文章

为什么在写css时尽量使用class而不使用id来标记元素

虽然一直以来写css代码都是用得class类名来标记元素,但这更多是自己的习惯,今天对这个问题做个分析总结. 下面是为什么这么做的具体原因 一:元素的class类名可以有很多个,而id名只能有一个.通过给一个元素添加多个class类名,可以更为灵活的控制元素的样式 <div class="size color"></div> //尺寸为200 * 200,背景颜色为pink .size { width: 200px; height: 200px; } .colo

使用css全面美化input标签

做网站时经常有这样那样的需要,要美化input ,于是CSS的美化必不可少.和程序人生的站长交流,他发给我这个. 下面是CSS样式 Js代码   input { border:1px solid #B3D6EF; background:#ffffff; } input { star : expression( onmouseover=function(){this.style.backgroundColor="#D5E9F6"}, onmouseout=function(){this.

css中的img和input标签

一般情况下,行内元素设置宽高是无效的,常见的有a标签.img和input也属于行内元素,但他们却可以设置宽高!!!! 查阅了一些资料才明白,原来css的元素还有另外一种分类方法,可替换元素,不可替换元素. a)可替换元素 浏览器根据标签的属性来决定元素的具体显示内容.如img标签,浏览器通过src属性读取图片信息(包括图片的宽高)来显示出来.input标签,通过它的type属性来决定它是文本域(type="text'),还是提交按钮(type="submit")等,对于表单元

html5中form表单新增属性以及改良的input标签元素的种类

在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!DOCTYPE html><html> <head> <title>表单测试</title> <meta charset="utf-8" /> <!-- 在不支持h5的浏览器中,可以用CSS样式进行改写 --> &

前端学习之路—html标签、css、js

一.HTML标签 1. head标签中 <meta> - 编码,跳转,刷新,关键字,描述,IE兼容 <title> - 加标题显示内容 <link> - 加小图标 <style> - 写css样式 <script> - 写js动态效果 2. body标签中 1)特殊符号: 空格:  大于号:> 小于号:< 参考网址:www.cnblogs.com/web-d/archive/2010/04/16/1713298.html 2)常用标签

html标签和css基础语法与浏览器兼容性等相关基础学习

<!-- table的使用 --> <h3>前端日常</h3> <form action="https://www.baidu.com"> <table border="1px" cellspacing="0px"><!--cellspacing单元格间隙--> <thead></thead><tbody> <col span=&qu

HTML input标签的checked属性与Razor解析

在HTML中,input标签可以通过type属性设置为checkbox.同时,也就包含了一个checked属性.对于这个checked属性,有一个特别的地方就是,它可以不需要属性值就可以表示是否选择了.这背后的原因是源自于早期的HTML,checked是一个独立的boolean属性. 所以给1)checked赋值true <input type="checkbox" checked="true" /> 和2)直接写checked <input ty

解决input[type=file]打开时慢、卡顿问题

为什么在input标签类型为file上传文件时在标签中设置属性 accpet="image/*",打开本地文件夹的速度特别慢? 经过测试发现,在mac里面safari.Firefox.Chrome(opera不知道为啥老闪退)都没有卡顿问题 在windows里面,Firefox不卡顿,只有Chrome卡顿. 于是我决定先去掉accpet试试……果然就没有了卡顿的问题.那么本包在试试accpet="image/jpg"果然也不卡卡的了!!看来问题的所在就是"

input 标签的监听事件总结

最近在写一个手机端提交表单的项目,里面用了不少input标签,因为项目不太忙,所以,想做的完美点,但是遇到了一些问题,比如:页面中的必填项如果有至少一项为空,提交按钮就是不能提交的状态,所以需要对所有的input内容进行监听,刚开始我用了jquery的keyup事件解决问题,但是后来测试出一个bug,如果用户选择粘贴复制的话,keyup事件不能触发,也就不能通过判断input内容来改变提交按钮的状态.下面就这种问题做下总结,希望对自己和他人以后能有点帮助. 1.onfocus  当input 获