仅供学习，转载请注明出处
简介
在设置input的适合，你会觉得默认的input样式并不好看。那么该怎么优化呢？
默认的input
可以从上面看出，这个样式的确不好看。
优化input样式
设置 outline-style: none ; 取消外边框
可以从上图看出，在点击输入input的适合，框边就显示比较粗的边框，那么怎么将这个样式取消呢？
input{
outline-style: none ;
}
设置好了样式之后，再在浏览器上面看看，如下：
border 边框优化
input的边框跟div的边框一样，都是可以用border来进行调整。
例如：取消边框样式 border: 0px;
input{
outline-style: none ;
border: 0px;
}
浏览器展示如下：
设置灰色 1px的边框 border: 1px solid #ccc;
input{
outline-style: none ;
border: 1px solid #ccc;
}
浏览器展示如下：
设置边框圆角效果
设置 border-radius: 3px;
input{
outline-style: none ;
border: 1px solid #ccc;
border-radius: 3px;
}
浏览器展示如下：
那么能不能调整input的大小呢？
设置input的大小
设置高度，如下：
padding: 7px 0px;
设置输入框高度，也可以用height，但是用height的话，输入框的光标会置于顶部，还要设置其他样式去固定，而且还不一定会兼容很好。
浏览器显示如下：
设置宽度，如下：
width: 620px;
因为input也是块元素，直接设置宽度即可，效果如下：
设置输入的字体大小
当前的字体有些小，那么可以调整一下。
设置字体大小 font-size: 24px; ，优化如下：
input{
outline-style: none ;
border: 1px solid #ccc;
border-radius: 3px;
padding: 14px 14px;
width: 620px;
font-size: 24px;
}
设置字体微软雅黑font-family: "Microsoft soft";，如下：
input{
outline-style: none ;
border: 1px solid #ccc;
border-radius: 3px;
padding: 14px 14px;
width: 620px;
font-size: 24px;
font-family: "Microsoft soft";
}
其中上面使用了padding 来调整输入框的高度，而字体太大也就相应影响了输入框高度，再简单优化一下，如下：
input{
outline-style: none ;
border: 1px solid #ccc;
border-radius: 3px;
padding: 13px 14px;
width: 620px;
font-size: 14px;
font-weight: 700;
font-family: "Microsoft soft";
}
最后再来看看，给输入框设置默认文字。
设置默认内容 placeholder
设置输入框的默认内容，使用placeholder属性。代码如下：
显示效果如下：
设置输入框点击发光效果
input:focus{
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
效果如下：
相关美化文献
