写出一个美观的表单页

animabear 发布于2019-08-05 15:32 / 467人阅读

摘要：如何写出一个美观的表单页前言最近做项目总能遇到各种各样，千奇百怪的需求。只能开动自己脑筋，自己写一些样式。附下我的地址，留下关于我写的登录注册。

如何写出一个美观的表单页

前言

最近做项目总能遇到各种各样，千奇百怪的需求。用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添加自己想用的图标
div:after{
    content: "";
    width: 14px;
    height: 8px;
    background: url(img/xiala.png) no-repeat center;
    //通过定位将图标放在合适的位置
    position: absolute;
    right: 20px;
    top: 45%;
    //给自定义的图标实现点击下来功能
    pointer-events: none;
}

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

总结

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

云服务器混合云 html表单美观用jsp写出一个日历 html 美观的表格 asp在同一个页修改

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/58598.html

写出一个美观的表单页

摘要：如何写出一个美观的表单页前言最近做项目总能遇到各种各样，千奇百怪的需求。只能开动自己脑筋，自己写一些样式。附下我的地址，留下关于我写的登录注册。如何写出一个美观的表单页前言最近做项目总能遇到各种各样，千奇百怪的需求。用bootstrap等ui框架不能满足客户需求。只能开动自己脑筋，自己写一些样式。如何调整input样式（包括placeholder字体样式） /*placeho...

zhangwang 2019-08-23 13:39 评论0 收藏0
写出一个美观的表单页

摘要：如何写出一个美观的表单页前言最近做项目总能遇到各种各样，千奇百怪的需求。只能开动自己脑筋，自己写一些样式。附下我的地址，留下关于我写的登录注册。如何写出一个美观的表单页前言最近做项目总能遇到各种各样，千奇百怪的需求。用bootstrap等ui框架不能满足客户需求。只能开动自己脑筋，自己写一些样式。如何调整input样式（包括placeholder字体样式） /*placeho...

GHOST_349178 2019-08-02 12:06 评论0 收藏0
写出一个美观的表单页

摘要：如何写出一个美观的表单页前言最近做项目总能遇到各种各样，千奇百怪的需求。只能开动自己脑筋，自己写一些样式。附下我的地址，留下关于我写的登录注册。如何写出一个美观的表单页前言最近做项目总能遇到各种各样，千奇百怪的需求。用bootstrap等ui框架不能满足客户需求。只能开动自己脑筋，自己写一些样式。如何调整input样式（包括placeholder字体样式） /*placeho...

jerryloveemily 2019-08-29 17:23 评论0 收藏0
四个步骤实现层级清晰的导航栏

摘要：在各个着陆页上，你可以放上重点作品有说服力的销售文案服务特点列表客户推荐信以及清晰的行为召唤按钮。除了放在着陆页的正文位置，笔者建议还可以在标题导航栏再放一个。【编者按】本文作者为 Wes McDowell，主要介绍通过四个步骤实现层级清晰的导航栏，进而提高网站的转化率。文章系国内 ITOM 管理平台 OneAPM 编译呈现。精心规划的导航策略可以成就一个网站，反之，则可能毁了一个...

Keagan 2019-05-29 17:49 评论0 收藏0
如何在写出高质量的文章

摘要：高质量的文章意义在于看得懂，看得爽，能学到东西。高质量的文章往往都是由浅入深，娓娓道来，而不是一出来就上代码。 showImg(https://segmentfault.com/img/bVBXvC); 许多文章内容还有的还行，可是排版方面似乎有点弱。我分析了人气比较高的文章，总结了这篇文章。如有不妥，还请指出来。高质量的文章意义在于看得懂，看得爽，能学到东西。格式套路 showI...

svtter 2019-07-31 12:22 评论0 收藏0