CSS如何设计出一个表单页面

小编给大家分享一下CSS如何设计出一个表单页面，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

　　/*placeholder字体颜色*/

　　::-webkit-input-placeholder{/*WebKitbrowsers*/

　　text-align:center;

　　color:RGB(154,171,180);

　　}

　　:-moz-placeholder{/*MozillaFirefox4to18*/

　　text-align:center;

　　color:RGB(154,171,180);

　　}

　　::-moz-placeholder{/*MozillaFirefox19+*/

　　text-align:center;

　　color:RGB(154,171,180);opacity:1;

　　}

　　:-ms-input-placeholder{/*InternetExplorer10+*/

　　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:1pxsolidrgba(185,198,203,.5);

　　box-shadow:002px#ccc;

　　}

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

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

　　使用伪类给select添加自己想用的图标

　　p:after{

　　content:"";

　　width:14px;

　　height:8px;

　　background:url(img/xiala.png)no-repeatcenter;

　　//通过定位将图标放在合适的位置

　　position:absolute;

　　right:20px;

　　top:45%;

　　//给自定义的图标实现点击下来功能

　　pointer-events:none;

　　}

以上是“CSS如何设计出一个表单页面”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！