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 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的边框样式和阴影

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券