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实例分析
URL网址：http://dzwzjz.com/article/pjigop.html

大橙子网站建设，新征程启航

css中浮动的label实例分析

其他资讯