深入浅出INPUT文本框
INPUT文本框在不同浏览器下的表现
我们将一个INPUT文本框字符宽度设置为30，代码如下：
< input id="demo1" name="demo1" type="text" size="30">
从外观上看，IE各版本浏览器显示长宽是一样的，都为220x21px，但是边框样式上有所不同。
Chrome、Firefox、Safari、Opera的长宽以及边框则各不相同。
其实INPUT在不同浏览器中的区别远不止这些，每个浏览器为了保证网页在没有样式表的情况下能够正常显示，它们都自带了一套默认的CSS样式表，而浏览器默认CSS样式表的差异造成了INPUT文本框在不同浏览器下有不同的表现。
解决方法很简单，使用自定义CSS覆盖默认CSS。
< style>
#demo2{
width:200px;
height:25px;
border:1px solid #999;
}
< input id="demo2" name="demo2" type="text" size="30">
这样单从外观上看，所有的浏览器表现一致。
去除难看的颜色边框
下面继续深入，当文本框获得焦点时，部分浏览器会出现一个颜色边框
IE6、Firefox、Opera不会出现颜色边框。
IE7、IE8、IE9在不设置border属性时，鼠标悬停及鼠标点击文本框，文本框均会出现一个蓝色边框，颜色较浅，不注意的话可能发现不了，当设置border属性后，边框不出现。
以Chrome为首的webkit内核浏览器，鼠标点击文本框后会出现一个土黄色边框。
Safari中鼠标点击文本框后会出现一个较粗的蓝色边框。
有时候出现边框是很影响视觉效果和用户体验的，不信的童鞋可以用Safari打开淘宝，点击宝贝搜索栏试试，不知道淘宝的前端有没发现这个问题，特别丑。
解决方法：设置border属性，并设置CSS中的outline属性为none。
< style>
#demo3{
outline:none;
border:1px solid #999;
}
< input id="demo3" name="demo3" type="text" size="30">
制作一个漂亮的搜索框
刚学CSS的朋友可能不清楚这样的搜索框是如何制作的，可以先把它拆解一下：
怎么样，结构简单吧，下面交给CSS就行了，变通一下，可以做出网上大部分的搜索框。
< style>
#search{
width:200px;
height:30px;
background:url(images/bg.gif) no-repeat;
display:block;
}
#demo6{
font-family:Verdana,SimSun;
color:#8A8A8A;
font-size:12px;
width:150px;
height:15px;
border:0;
float:left;
margin:7px 10px 0;
outline:none;
}
#btn{
width:16px;
height:16px;
background:url(images/btn.gif) no-repeat;
border:0;
float:left;
margin-top:7px;
}
< input id="demo6" name="demo6" type="text">
< input id="btn" type="submit" value="">
