html input样式优化,CSS Input 样式美化

仅供学习，转载请注明出处

简介

在设置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)

}

效果如下：

相关美化文献