如何写一个漂亮的表单页面前言最近在项目中总是遇到各种奇奇怪怪的需求。使用bootstrap等ui框架不能满足客户需求。只能动动脑筋,自己写一些样式。如何调整输入样式(包括占位符字体样式)/*占位符字体颜色*/::-webkit-input-placeholder{/*WebKit浏览器*/text-align:center;color:RGB(154,171,180);}:-moz-placeholder{/*MozillaFirefox4到18*/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{/*清除选择边框样式*/border:none;/*clearthebordercolorwhentheselectisfocused*/outline:none;/*隐藏select的下拉图标*/appearance:none;/*文本以padding-left的值居中*/padding-left:50px;-webkit外观:无;-moz-外观:无;宽度:370px;行高:41px;高度:41px;边界半径:20px;border:1pxsolidrgba(185,198,203,.5);box-shadow:002px#ccc;}同理,input、button等表单项也可以通过这些不常见的属性进行调整。如果想在表单项中实现如下效果,可以:使用伪类添加你要使用的图标div:after{content:"";宽度:14px;高度:8px;背景:url(img/xiala.png)无重复中心;//通过定位position:absolute;将图标放到合适的位置右:20px;顶部:45%;//clickdownfunctionforthecustomiconpointer-events:none;}还有一点很重要,为了让select达到类似占位符的效果,可以设置selecteddisableddisplay:none;
