<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 - 分享、共赢