如何创建浮动式标签模式?

效果如下图:
4041

Code

Jesse Shawl创建的这款Codepen代码编辑工具很强大,它可以帮助你创建完美的、可视的浮动标签模式。下面我们就来演示如何在HTML、CSS以及JavaScript中创建浮动式标签。

…收起>>

HTML

创建如下图:4042

4043

CSS

form{
  margin: 5em;
  backface-visibility: hidden;
}
.input{
  position: relative;
  float: left;
  margin: 10px;
}
input{
  border: 1px solid #eee;
  padding: 1em .5em;
  outline: none;
}

4044
而下面的这段代码,你就能看到动画效果。规则就是,input + label定义了标签输入样式。通过设定all,可以改变所有的属性,包括属性,位置、尺寸以及色彩。

input + label { 
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  color:#aaa;
  transition:all .2s ease;
}

4045
如果标签是聚焦点,这就意味着我们想要的颜色、字体大小和位置都将发生改变。 这里我们将translateY(-50%)改为transform:none。

input:focus + label, {
  color: #52A5FB;
  font-size: .65em;
  top: 8%;
  transform: none;
}

4046
将背景设置成浅灰色。在这.not-empty起到了很大作用。

.not-empty + label {
  color:#aaa;
}

JavaScript

var inputs = document.getElementsByTagName('input'); 

现在我们有一个for循环,每次点击输入,选择类型输入,我们将其称为bindUI运行功能。

for( i=0 ; i<inputs.length; i++ ) {
  var input = inputs[i];
  input.addEventListener('keyup',bindUI, false);
} 

定义这个bindUI函数,操作流程如下,如果需要输入一个值,在这可以添加一个被命为.not-empty的字段。’not-empty’意味着有个占位符。

function bindUI() {
  if( this.value ) {
   this.classList.add('not-empty');
  } else {
    this.classList.remove('not-empty');
  }
}

4047

这种模式动效也很细腻,不是吗?你可以在GitHub上查看FloatLabeled更多信息。

英文出自:Queness

Leave a Comment

电子邮件地址不会被公开。 必填项已用*标注