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