当前位置: 首页 > Web前端 > HTML5

写一个漂亮的表单页面

时间:2023-04-05 21:35:08 HTML5

如何写一个漂亮的表单页面前言最近在项目中总是遇到各种奇奇怪怪的需求。使用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;selectunit总结一下这次的解决方案没什么难的,但是确实需要一点时间,所以记下来了,烂笔不如好记性。附上我的github地址,我写的留个登录注册。链接说明