如何使用CSS设计出一个表单页面（附示例）

来源：豪特汽车网

本篇文章给大家带来的内容是关于如何使用CSS设计出一个表单页面（附示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

最近做项目总能遇到各种各样，千奇百怪的需求。用bootstrap等ui框架不能满足客户需求。只能开动自己脑筋，自己写一些样式。

如何调整input样式（包括placeholder字体样式）

/*placeholder字体颜色*/
::-webkit-input-placeholder { /* WebKit browsers */
 text-align: center;
 color:RGB(154,171,180);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
 text-align: center;
 color:RGB(154,171,180);
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
 text-align: center;
 color:RGB(154,171,180);opacity:1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
 text-align: center;
 color:RGB(154,171,180) !important;
}

修改表单项样式

select{
 /*清除select的边框样式*/
 border: none;
 /*清除select聚焦时候的边框颜色*/
 outline: none;
 /*隐藏select的下拉图标*/
 appearance: none;
 /*通过padding-left的值让文字居中*/
 padding-left: 50px;
 -webkit-appearance: none;
 -moz-appearance: none;
 width: 370px;
 line-height: 41px;
 height: 41px;
 border-radius: 20px;
 border:1px solid rgba(185,198,203,.5);
 box-shadow: 0 0 2px #ccc;
}

同理，input、button等表单项都可以通过这些不常见的属性调整。

若想在表单项实现如下效果则可以：

使用伪类给select添加自己想用的图标
p:after{
 content: "";
 width: 14px;
 height: 8px;
 background: url(img/xiala.png) no-repeat center;
 //通过定位将图标放在合适的位置
 position: absolute;
 right: 20px;
 top: 45%;
 //给自定义的图标实现点击下来功能
 pointer-events: none;
}

还有一个要点，要想使select实现类似placeholder效果,则可以设置selected disabled dispaly:none;

<option value="placeholder" disabled selected style="display:none">选择单位</option>

总结

这次解决的也不是什么难题，但是确实会花费一点时间，所以我写下了，好记性不如烂笔头。
附下github地址，留下关于我写的登录注册。