4个实例演示——美化表单input输入框CSS样式

在网站或APP等UI设计中，表单的使用频率非常之高，它的设计也就显得尤为重要，一张漂亮的表单肯定会比一张平庸的表单更能吸引住用户，用户用得舒适，他停留的时间也就自然会更长，比如这张让人眼前一亮的纯CSS3实现的注册表单。

在本文中，将通过4个实例，演示如何美化表单input输入框的CSS样式。

1. 扁平表单
2. 添加阴影和圆角
3. 半透明效果
4. 设置输入框提示文字样式

1、扁平表单

这种扁平表单没有过多的设计元素，它只是把默认的input属性稍微加工了一下，比如把边框宽度设为0，加上一个边距让文字缩进一点，这样看起来文字没那么拥挤。

demodownload

表单主要CSS：

input{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance:none ;
  outline: 0;
  padding:0 8px;
}

2、添加阴影和圆角

下面我们加入一点设计元素，使用border-shadow添加阴影，和使用border-radius添加圆角。

于是，表单立即变得立体起来，变得更加时尚了，而圆润平滑的边角给人一种柔和的印象，表单总体给人一种更加舒适的感觉。

demodownload

表单主要CSS：

input{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance:none ;
  outline: 0;
  padding:0 8px;
}
input{
  box-shadow: 0 2px 10px 2px #999999;
  border-radius:30px;
}

这里说一下box-shadow。

box-shadow 向框添加一个或多个阴影。

语法：

box-shadow: h-shadow v-shadow blur spread color inset;

注释：

box-shadow 属性由逗号分隔阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

3、半透明效果

利用 background: rgba(); 来设计一些半透明的输入框，这种时候通常会搭配一些稍微丰富一点的背景色。

半透明效果会让表单变得更加质感。

demodownload

表单主要CSS：

input {
    appearance: none;
    text-align: center;
    height: 36px;
    width: 248px;
    border-radius: 15px;
    border: 0px solid #fff;
    padding: 0 8px;
    outline: 0;
    letter-spacing: 1px;
    color: #fff;
    font-weight: 600;
    background: rgba(45,45,45,.10);
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
    text-shadow: 0 1px 2px rgba(0,0,0,.1);
    -o-transition: all .2s;
    -moz-transition: all .2s;
    -webkit-transition: all .2s;
    -ms-transition: all .2s;
}
input {
    box-shadow: 0 0 5px 4px rgba(0, 0, 0,0.1);
}

在设计透明效果时，充分利用background、box-shadow的属性搭配，设计出满意的效果。

上述示例background的属性值rgba(45,45,45,.10); 里，.10是表示透明度，前面3个数字(45,45,45)是用来表示rgb颜色。

4、设置输入框提示文字样式

输入框使用了placeholder显示提示文字，它的文字样式是可以修改的。

提示文字的颜色透明度一般比较低，颜色比较灰浅。

demodownload

placeholder的CSS：

input::-webkit-input-placeholder {
  color: #c1c1c1;
}
input:-moz-placeholder {
  color: #c1c1c1;
}
input::-moz-placeholder {
  color: #c1c1c1;
}
input:-ms-input-placeholder {
  color: #c1c1c1;
}

总结

本文通过4个实例，介绍了如何使用CSS美化表单input输入框样式。通过美化过的表单，给人印象会更加深刻，给人的好感度会倍增。所以在UI设计时，表单的美化是不容忽视的。

您可能对以下文章也感兴趣

• CSS表单输入框设计：点击放大输入框
• jQuery和CSS3实现有进度条的多步注册表单
• CSS表单输入框设计：点击放大输入框
• 纯CSS：点击输入框时，标签（占位符）浮动可见
• 纯css3实现漂亮的用户注册表单
• CSS3+jQuery实现登录表单与注册表单同页平滑切换
• 漂亮的注册和登录切换表单【html5和css3实现】