css中浮动的label实例分析

这篇文章主要讲解了“css中浮动的label实例分析”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css中浮动的label实例分析”吧!

员工经过长期磨合与沉淀,具备了协作精神,得以通过团队的力量开发出优质的产品。创新互联公司坚持“专注、创新、易用”的产品理念,因为“专注所以专业、创新互联网站所以易用所以简单”。公司专注于为企业提供成都网站设计、成都网站制作、微信公众号开发、电商网站开发,小程序开发,软件按需定制制作等一站式互联网企业服务。

    在web项目中,有一个很重的模块就是登陆/注册模块,这个模块的主体部分就是一个form表单,这个form表单包含两个重要input组(用户名/密码),每个input组都包含label和input,而关于label+input的布局方案多种多样,不同的设计师有不同的设计风格,不同的前端工程师又有不同的实现方式。通过对比发现,现在的方案是既注重美观,又注重性能。

    那么,关于label和input都有哪些布局方案呢?

    label+input的布局方案

    将label和input(palcholder关键字提示)分为上下两部分;//很久以前采用,现在偶尔使用

    将label和input(palcholder关键字提示)分为左右两部分(label占据一定的宽度,而label中的字体采用左对齐,右对齐,两端对齐这三种常见的方案);//案例:微博登陆,jdwap登陆页面等

    label和input(palcholder关键字提示)还是分为左右两部分,不同的是label中的字体使用图标代替;//案例:segmentfault社区登陆页面等

    只包含input(palcholder关键字提示);//案例:手淘的登陆页面,掘金开发社区的登陆页面等

    只显示input(palcholder关键字提示),而label采用浮动并隐藏,当触发input的焦点事件时label显示。//案例:手淘的之前登陆页面,或者参考JVFloatLabeledTextField等

    这几种方案各有优劣,使用label字体用图标代替更形象,但是增加了图标的url访问;label的中的字体个数不一致,看起来不美观,字数相同,这种方案只能说中规中矩;而直接丢弃label,可以使界面简洁美观,但是label有label的作用(下面会详细说label和placeholder的作用);使用浮动的label,增加了动画效果,但需要引入js,这种方案性能,比起不使用js的明显要高(有一种不用js,但兼容性不是太好的方案)。

    labelvsplacholder

    label:描述表单元素的角色,用来指定input的是唯一字段名称

    placeholder:它提示用户输入内容的格式

    它们两个看似类似,但是它们的职责不同,很多同学在这里犯了比较大的错误。

    如果需要知道它们更多的内容可参考MDN

    带动画的label(no-js)

    在做用户交互的页面时,带上动画的用户交互,往往更容易打动用户。下面就介绍一个用伪类实现的浮动label。

    HTML代码:

   

   

    账号

   

    基本布局css代码:

    .input-group{

    position:relative;

    margin:100px20px;

    font-size:16px;

    }

    .input-group>input{

    display:block;

    box-sizing:border-box;

    width:100%;

    padding:16px;

    font-size:16px;

    line-height:1.0;

    border:none;

    border-bottom:1pxsolid#cdcdcd;

    border-radius:0.4em;

    transition:box-shadow0.3s;

    }

    .input-groupinput::placeholder{

    color:#cdcdcd;

    }

    .input-group>input:focus{

    outline:none;

    box-shadow:0.2em0.8em1.6em#cdcdcd;

    }

    .input-group>label{

    position:absolute;

    bottom:50%;

    left:0;

    z-index:-1;

    visibility:hidden;

    color:#050505;

    opacity:0;

    }

    首先,设置了label的位置(posiion:absolute),并定义了它的层级(z-index:-1),显隐性为(visibility:hidden),透明度(opacity:0);

    然后,设置了input的placeholder样式,可使用伪元素::placeholder设置其样式;

    最后,设置了一个过渡动画效果,当input元素标签获得焦点时,使用伪类:focus定义了input元素标签获得焦点时的阴影样式(box-shadow)和轮廓样式(outline)。

    label浮动效果样式

    .input-group>label{

    ...

    -webkit-transform-origin:00;

    transform-origin:00;

    -webkit-transform:translate3d(0,0,0)scale(0);

    transform:translate3d(0,0,0)scale(0);

    -webkit-transition:

    opacity0.3s,

    visibility0.3s,

    transform0.3s,

    z-index0.3s;

    transition:

    opacity0.3s,

    visibility0.3s,

    transform0.3s,

    z-index0.3s;

    }

    .input-group>input:focus~label{

    z-index:1;

    visibility:visible;

    opacity:1;

    -webkit-transform:translate3d(0,-36px,0)scale(1);

    transform:translate3d(0,-36px,0)scale(1);

    }

    在定义label样式的集合内,添加它的初始transform形变效果,同时设置transition过渡效果样式,然后定义当input获得焦点时,它的兄弟元素label的样式即可。

    这种label浮动的效果和JVFloatLabeledTextField的效果不同,前者是获取到焦点,label立马开始浮动,而后者是当用户输入内容时(也就是placeholder消失时),label开始浮动。

    要使两者的效果相同,我们可以使用伪类可以嵌套的特性,修改.input-group>input:focus~label为.input-group>input:focus:not(:placeholder-shown)~label,这里的:placeholder-shown可以定义placeholder的显隐效果,但它的兼容性不太好,ie/edge压根不支持,chrome和safari,以及Firefox还可以。案例:demo


css中浮动的label实例分析

感谢各位的阅读,以上就是“css中浮动的label实例分析”的内容了,经过本文的学习后,相信大家对css中浮动的label实例分析这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


分享名称:css中浮动的label实例分析
本文地址:http://scyanting.com/article/pjigop.html

其他资讯