CSS Input 样式美化

Devops海洋的渔夫

发布于 2019-05-31 16:33:10

4.6K0

发布于 2019-05-31 16:33:10

文章被收录于专栏：Devops专栏Devops专栏

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

简介

在设置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 type="text" 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)
}

效果如下：

html页面输入框input的美化

CSS去除Input的边框样式和阴影

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019.02.23 ，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度