兼容的带样式的INPUT
来源:互联网 发布:营运数据分析怎样写 编辑:程序博客网 时间:2024/05/29 08:02
- <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">