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