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


本文摘自PHP中文网,作者不言,侵删。

本篇文章给大家带来的内容是关于如何使用CSS设计出一个表单页面(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

/*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;

}

  • 修改表单项样式

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

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等表单项都可以通过这些不常见的属性调整。

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

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;

}

2260586284-5bf7be95f11db_articlex.png

  • 还有一个要点,要想使select实现类似placeholder效果,则可以设置selected disabled dispaly: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》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...