本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家带来的内容是关于如何使用CSS设计出一个表单页面(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。最近做项目总能遇到各种各样,千奇百怪的需求。用bootstrap等ui框架不能满足客户需求。只能开动自己脑筋,自己写一些样式。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | ::-webkit-input-placeholder {
text-align: center;
color:RGB(154,171,180);
}
:-moz-placeholder {
text-align: center;
color:RGB(154,171,180);
}
::-moz-placeholder {
text-align: center;
color:RGB(154,171,180);opacity:1;
}
:-ms-input-placeholder {
text-align: center;
color:RGB(154,171,180) !important;
}
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | select{
border: none;
outline: none;
appearance: none;
padding-left: 50px;
-webkit-appearance: none;
-moz-appearance: none;
width: 370px;
line-height: 41px;
height: 41px;
border-radius: 20px;
border:1px solid rgba(185,198,203,.5);
box-shadow: 0 0 2px #ccc;
}
|
1 2 3 4 5 6 7 8 9 10 11 12 13 | 使用伪类给select添加自己想用的图标
p:after{
content: "" ;
width: 14px;
height: 8px;
background: url(img/xiala.png) no-repeat center;
position: absolute;
right: 20px;
top: 45%;
pointer-events: none;
}
|
1 | <option value= "placeholder" disabled selected style= "display:none" >选择单位</option>
|
这次解决的也不是什么难题,但是确实会花费一点时间,所以我写下了,好记性不如烂笔头。
附下github地址,留下关于我写的登录注册。
阅读剩余部分
相关阅读 >>
css class是什么意思
javascript 删除函数是什么
HTML5中web sql的学习小结
HTML5中audio与video标签的使用
css怎样实现div高度自适应
html字体颜色如何设置
javascript用什么方法触发按钮的被点击事件
css颜色有几种写法
h5的通用接口详细介绍
css如何实现显示和隐藏
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 如何使用CSS设计出一个表单页面(附示例)