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


当前题目:CSS如何设计出一个表单页面
URL网址:http://scyanting.com/article/pedejj.html