手揣网教程:绿色安全纯净官方版,体验当今速度最快的浏览器!

如何使用CSS设计出一个表单页面(附示例)

时间:2024/6/18作者:未知来源:手揣网教程人气:

[摘要]本篇文章给大家带来的内容是关于如何使用CSS设计出一个表单页面(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。最近做项目总能遇到各种各样,千奇百怪的需求。用bootstra...
本篇文章给大家带来的内容是关于如何使用CSS设计出一个表单页面(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

最近做项目总能遇到各种各样,千奇百怪的需求。用bootstrap等ui框架不能满足客户需求。只能开动自己脑筋,自己写一些样式。

  • 如何调整input样式(包括placeholder字体样式)

/*placeholder字体颜色*/
::-webkit-input-placeholder { /* WebKit browsers */
    text-align: center;
    color:RGB(154,171,180);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-align: center;
    color:RGB(154,171,180);
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-align: center;
    color:RGB(154,171,180);opacity:1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    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:1px solid rgba(185,198,203,.5);
    box-shadow: 0 0 2px #ccc;
}
  • 同理,input、button等表单项都可以通过这些不常见的属性调整。

  • 若想在表单项实现如下效果则可以:

使用伪类给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;
}

如何使用CSS设计出一个表单页面(附示例)

  • 还有一个要点,要想使select实现类似placeholder效果,则可以设置selected disabled dispaly:none;

<option value="placeholder" disabled selected style="display:none">选择单位</option>
  • 总结

这次解决的也不是什么难题,但是确实会花费一点时间,所以我写下了,好记性不如烂笔头。
附下github地址,留下关于我写的登录注册。

以上就是如何使用CSS设计出一个表单页面(附示例)的详细内容,更多请关注php中文网其它相关文章!


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



关键词:如何运用CSS设计出一个表单页面(附示例)




Copyright © 2012-2018 手揣网教程(http://www.shouchuai.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版