本文介绍了如何自定义HTML表单中input输入框的样式，特别是聚焦（获取光标）和失去焦点时的样式。通过CSS设置`-webkit-appearance`和`-moz-appearance`为`none`去除默认样式，并调整边框颜色来美化获取焦点时的输入框。同时，分享了如何修改placeholder的字体颜色。对于文本框失去光标后的样式改变，使用JavaScript实现焦点和非焦点状态的切换，动态改变背景色和边框颜色。
我们在写表单的时候，经常需要自定义表单的样式，当然input输入框也不例外，那么如何能写出好看一点的输入框呢？文本框获取光标的时候如何美化它呢？
简单的表单HTML
input获取光标时候的CSS样式去掉默认样式代码：-web-kit-appearance:none; -moz-appearance: none;
input[type="text"],#btn1,#btn2{
box-sizing: border-box;
text-align:center;
font-size:1.4em;
height:2.7em;
border-radius:4px;
border:1px solid #c8cccf;
color:#6a6f77;
-web-kit-appearance:none;
-moz-appearance: none;
display:block;
outline:0;
padding:0 1em;
text-decoration:none;
width:100%;
}
input[type="text"]:focus{
border:1px solid #ff7496;
以上CSS不支持IE6
如果是文本域
最低0.47元/天 解锁文章
850
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
