兼容的带样式的INPUT

 

<style>
/*
	作用描述：给INPUT添加美化的样式，兼容IE8,IE9,FF,chrome,safari等
	效果描述；
		- 1.边框带圆角
		- 2.指定INPUT高度
		- 3.INPUT文本上下居中，添加左边距
		- 4.背景色为白色
		- 5.当INPUT获得光标的时候，边框高亮显示天蓝色。
		- 6.IE7下没有高亮效果
		- 7.chrome下聚焦后边框是2px。
*/
.cssInput{
	border:1px solid #7A6F6F;
	border:1px solid #7A6F6F \9;/*IE*/
	width:200px;
	height:20px;/*非IE高度*/
	height:20px \9;/*IE高度*/
	padding-left:5px; /*all*/
	line-height:20px \9;/*IE*/
	-moz-border-radius:3px;/*Firefox*/
	-webkit-border-radius:3px;/*Safari和Chrome*/
	border-radius:3px;/*IE9+*/
	background-color:white;
	outline:none;
}
.cssInput:focus{/*IE8+*/
	border-color:#78BAED;
	[;outline:1px solid #78BAED;/*chrome*/
}</style>
	<input type="text" class="cssInput" id="txt_id" value="我是cssInput的text"><br/><br/>
	
	<input type="text" id="txt_id" style="width:200px;" value="我是普通的text">

 

附件是效果图

 

 

 

 

 

 

愤怒的coder  - 分享、共赢

 

 

评论

1 楼 dy804731771 2014-06-19  

谢谢您的分享，对我有帮助