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

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

创新互联科技有限公司专业互联网基础服务商，为您提供四川服务器托管，高防物理服务器租用，成都IDC机房托管，成都主机托管等互联网服务。

/*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如何设计出一个表单页面”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！